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
});

FIDDLE

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
});

fiddle here

Jquery切换多个按钮

4 个答案: