jquery - Jquery切换多个按钮

Question

我有多个按钮，它们通过 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

这应该可以解决问题：

$(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 3

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

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

Answer 4

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

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

在这里摆弄