使用JQuery更改不同的HTML按钮

Question

    jQuery('#button1').removeClass('before');
    jQuery('#button1').addClass('after');

是用于更改Jquery中单个按钮的代码。当我有名为button1，button2等的按钮时，我想知道如何根据按下的按钮更改按钮。

Answer 1

$(input[name^="button"]).removeClass('before')
$(input[name^="button"]).addClass('after')

这将选择名称以示例中指定的button开头的所有输入元素。查看selector了解详情。

Answer 2

确保所有按钮属于同一类，例如btnClass。然后：

jQuery('.btnClass').click(function() {
  jQuery(this).removeClass('before').addClass('after');
});

Answer 3

请注意，您可以使用toggleClass而不是手动“删除/添加”课程。 除此之外，有很多方法可以选择多个dom元素。看一下可用的jQuery selectors。

例如，您可以使用类选择器：

$('.before').toggleClass('after')
​

如果您有一组与类选择器不匹配的按钮，但您知道id，则可以执行以下操作：

$('#number1, #number2').toggleClass('after')

修改

根据您的编辑，您可以绑定到所需元素的点击事件：

$('.before').on('click', function(e){
   $(this).toggleClass('after')
});

以下是一个示例：http://jsfiddle.net/LqsqB/1/

编辑2：

如果您想要绑定到点击事件，您可以在dom ready上执行此操作：

<script type="text/javascript">

      $(function() {
            $('.before').on('click', function(e){
              $(this).toggleClass('after')
           });
      });

</script>

Answer 4

如果您使用<button>标签创建按钮，那么

$("button").click(function () {
   $(this).toggleClass('after')
});  

如果您使用<input type='button' />，那么

 $("input[type='button']").click(function () {
    $(this).toggleClass('after')
 });

请参阅：http://jsfiddle.net/CWSY9/