Question

我正在使用此代码更改按钮的类：

$('button').on('click', function(){
    var btn=$(this);
    if(btn.attr('class')=='tct-button'){
        btn.removeClass('tct-button').addClass('tct-button2');
    }
    else{
        btn.removeClass('tct-button2').addClass('tct-button');
    }

});

问题是我有多个div，每个div都有多个按钮。我需要改变它，这样每次我点击一个div中的按钮时，前一次点击（在同一个div中）改变的其他按钮会改回默认类“tct-button”，而只是最后一个点击按钮变为'tct-button2'。你能帮我吗？

Answer 1

在jquery中使用 toggleClass ，无需检查hasClass（）

$(this).toggleClass("tct-button2 tct-button");

的 DEMO

Answer 2

使用hasClass()

确定是否为任何匹配的元素分配了给定的类。

代码的

$('button').on('click', function(){
    var btn=$(this);
    if(btn.hasClass('tct-button')){
        btn.removeClass('tct-button').addClass('tct-button2');
    }
    else{
        btn.removeClass('tct-button2').addClass('tct-button');
    }       
});

但我觉得你需要

$('button').on('click', function(){
    $('.tct-button2').removeClass('tct-button2'); //Remove all class 
    $(this).addClass('tct-button2'); //Add the class to current element
});

Answer 3

如果你想在你的按钮（tct-button2）上添加一个额外的类，同时在每个按钮上保持tct按钮，你可以做Satpal所建议的。

然而，从它的声音和我可能是错的，如果你想改变类，使每个按钮一次只有一个类（tct按钮或tct-button2）你可以做类似对于Satpal的建议和使用：

$('button').on('click', function(){
    $('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Add original class and Remove tct-button2 class
    $(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});

以下是示例http://jsfiddle.net/lee_gladding/xao46uzs/

只影响被点击的div所属的div，使用类似的方法：

$('button').on('click', function(){
    $(this).parent('div').find('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Remove all class in that div
    $(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});

（您可能希望为父级使用更好的选择器，可能是类或实际使用的html）

示例：

http://jsfiddle.net/lee_gladding/xao46uzs/3/

如何更改div中的按钮类而只是最后一个可以保持更改？

3 个答案:

的 DEMO