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>

Demo

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

修改如果我点击任何div只有特定的div应该改变而div的其余部分应该处于默认状态请有人帮忙，感谢。

Answer 1

使用此代码： http://jsfiddle.net/hushme/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');

演示：Fiddle

或者如果你不想继续翻转

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

演示：Fiddle

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

注意如果您单击两次相同的元素会发生什么。该元素将返回默认状态。

Jquery toggleClass没有像我预期的那样工作

4 个答案: