jquery - Jquery toggleClass 没有按我的预期工作

Question

以下 toggleClass 不起作用：

    $('.t').click(function() {
        var className = $(this).data('class');
        $(this).toggleClass(className).toggleClass(className+'1');
    });

HTML

 <div class="t a" data-class="a"> 8cghfghfghfghfg</div>
 <div class="t b" data-class="b">20cghfghfghfghfg</div>
 <div class="t c" data-class="c"> 4cghfghfghfghfg</div>

演示

在这里，我想做的是..如果我点击 div.t，我想删除特定的类（例如：.a）并添加相应的类（例如 .a1）

编辑 如果我点击任何 div 只有特定的 div 应该更改，其余的 div 应该处于默认状态，请任何人帮助，谢谢。

Answer 1

使用此代码： http: //jsfiddle.net/hus​​hme /m9ak9/1/

    $('.t').click(function() {
        var className = $(this).attr('data-class');
  $(this).toggleClass(className).toggleClass(className+'1');
    });

您没有获得 attr 值。

Answer 2

尝试

$(this).toggleClass(className + ' ' + className+'1');

演示：小提琴

或者，如果您不想继续切换

$(this).removeClass(className).addClass(className+'1');

演示：小提琴

Answer 3

这是处理重置为默认状态的快速修复：http: //jsfiddle.net/mbMhN/

$('.t').click(function () {

    $('.t').each(function () {
        var cls = $(this).data('class');
        $(this).removeClass(cls + "1").addClass(cls);
    });


    var className = $(this).data('class');
    $(this).toggleClass(className).toggleClass(className + '1');
});

Answer 4

如果您还希望能够“取消切换”活动元素，您可以使用这个：

http://jsfiddle.net/naresh_k28/m9ak9/

    $('.t').click(function() {
        var currentElement = this;
        var className = $(currentElement).data('class');
        $('.t').each(function(index, element) {
            var jQelement = $(element);
            var className = jQelement.data('class');
            if (element !== currentElement) {
                jQelement.removeClass(className+1).addClass(className);
            }
        });
        $(this).toggleClass(className).toggleClass(className+'1');
    });

请注意，如果您单击同一个元素两次会发生什么。该元素将返回到默认状态。