Jquery切换多个按钮

我有多个按钮，通过jquery切换脚本获得活动的css样式。 但我想一次只有一个按钮。 但是，当我重新点击一个活动按钮时，它必须变得不活跃。

$(document).ready(function(){ $('.button').click(function() { $(this).toggleClass('buttonactive'); }); }); 

基本上我需要添加一行说：

$(all .button except this).removeClass('buttonactive');

我不知道怎么做。 有人能帮我吗？ 这是一个有问题的JSFIDDLE： http ： //jsfiddle.net/nV5Tu/3/

Answer 1

您可以这样做，使用.toggleClass（）来切换当前元素..然后使用.not（）过滤掉当前元素从删除类

 $('.button').click(function() { $('.button').not(this).removeClass('buttonactive'); // remove buttonactive from the others $(this).toggleClass('buttonactive'); // toggle current clicked element }); 

小提琴

Answer 2

为什么不简单地删除所有并this添加？

 $('.button').click(function() { $('.button').removeClass('buttonactive'); $(this).addClass('buttonactive'); }); 

Answer 3

这应该是诀窍：

 $(document).ready(function(){ $('.button').click(function() { if($(this).hasClass("buttonactive")) { $(this).removeClass('buttonactive'); } else { $(this).addClass('buttonactive'); } $(".button").removeClass("buttonactive"); // removes all other active classes }); }); 

Answer 4

你不需要三个document.ready(function() ..一个就够了……

 $('.button').click(function() { $(".button").removeClass("buttonactive"); // remove the class for all button on click }); 

在这里小提琴