Jquery函数在多个按钮上添加类和删除类，但只执行特定按钮单击

Hello I seem to be stuck on this certain code. I have multiple buttons on my website that when you click one, it changes classes & the text inside then revert back after clicking again. It seems to only work on one button but there are multiples of buttons with the same ID & when they are clicked nothing happens. Heres the codeenter code here

你好,我似乎被困在这个特定的代码上。我的网站上有多个按钮,当您单击一个按钮时,它会更改类和内部文本,然后再次单击后恢复。它似乎只适用于一个按钮,但有多个具有相同ID的按钮,当它们被点击时没有任何反应。这里是代码中心代码

$('#btnInfo').click(function() 
{ 
  if ($(this).text() == "More Info") 
  { 
     $(this).text("Cancel").addClass('btn-danger'); 
  } 
  else 
  { 
     $(this).text("More Info").removeClass('btn-danger'); 
  }; 
});

Im not to sure only one button gets the function while the others stay the same when i click them but I want all the buttons to execute the code above but onlt to the button i specifically clicked with the ID

我不确定只有一个按钮获取功能,而其他按钮保持相同,当我点击它们但我希望所有按钮执行上面的代码,但是我点击按钮我特意点击ID

3 个解决方案

#1

First, you cannot have more than one element with the same "ID", so use class instead. I think what you want is to bind the event click to all your buttons, do this instead.

首先,您不能有多个具有相同“ID”的元素,因此请改用class。我想你想要的是将事件点击绑定到所有按钮,而不是这样做。

$('.className').on('click', function(e){
    if ($(this).text() == "More Info") 
    { 
        $(this).text("Cancel").addClass('btn-danger'); 
    } 
    else 
    { 
        $(this).text("More Info").removeClass('btn-danger'); 
    }; 
});

Check the link for more info : http://api.jquery.com/on/

查看链接以获取更多信息:http://api.jquery.com/on/

#2

It's unclear what you are looking exactly
If you are looking for this functionality for all the buttons, you need something like this.

目前还不清楚你究竟在想什么如果你正在寻找所有按钮的这个功能,你需要这样的东西。

$('button').click(function()  //see changed css selector
{ 
  if ($(this).text() == "More Info") 
  { 
     $(this).text("Cancel").addClass('btn-danger'); 
  } 
  else 
  { 
     $(this).text("More Info").removeClass('btn-danger'); 
  }; 
});

#3

Your selector is an id #btnInfo in the below line

您的选择器是下面一行中的id #btnInfo

$('#btnInfo').click(function()

This will select only one button. Use a class, .btnInfo and add it as class attribute to the buttons

这将只选择一个按钮。使用类.btnInfo并将其作为类属性添加到按钮

#1