在 jquery 中更改 li 类答案

【问题标题】：Change li class in jquery在 jquery 中更改 li 类
【发布时间】：2013-09-19 19:07:16
【问题描述】：

我想更改当前选中的 li(list) 的类

 $('li.doBlokkeer').click(function(e) {
 $(this).addClass('doDEBlokkeer').removeClass('doBlokkeer');
 });

 $('li.doDEBlokkeer').click(function(e) {
 $(this).addClass('doBlokkeer').removeClass('doDEBlokkeer');
 });

因此，如果选择了当前 li，则需要更改其类（它需要具有 doDEBlokkeer）。上面的代码有效.. 问题是这对每个 LI 项目仅适用一次..

当我单击 li.doBlokkeer 时，类会发生变化，这很好，但是当我再次按下相同的当前 li 时，它会调用相同的函数 li.doBlokkeer 而不是 li.doDEBlokkeer 函数（尽管有 css 类）。我尝试了很多东西，但我真的找不到任何解决方案。你们能帮帮我吗？我一直在寻找解决方案超过 14 小时，现在很沮丧......

【问题讨论】：

标签： javascript jquery list dom addclass

【解决方案1】：

问题是您将事件绑定到类选择器上（对于当时存在于 DOM 中的元素），该事件会动态更改，因此您的绑定丢失。您可以考虑使用事件委托语法或将其绑定到不会更改的不同类/选择器。

使用事件委托 (jq >=1.7) 你可以试试：

$('ul').on('click', 'li.doBlokkeer', function(e) {
     $(this).addClass('doDEBlokkeer').removeClass('doBlokkeer');
 });

 $('ul').on('click', 'li.doDEBlokkeer', function(e) {
    $(this).addClass('doBlokkeer').removeClass('doDEBlokkeer');
 });

另一个快捷方式：

$('.cls').click(function (e) { // add a common class to all lis and bind the click event to that.
    var flg = $(this).is('.doBlokkeer'); //check if it is a specific class
    $(this).addClass(function () {
        return flg ? 'doDEBlokkeer' : 'doBlokkeer'; //based on flag return the other class
    }).removeClass(function () {
        return flg ? 'doBlokkeer' : 'doDEBlokkeer'; //based on flag return the other class
    });
});

或者只是：

$('.cls').click(function (e) {
    $(this).toggleClass('doDEBlokkeer').toggleClass('doBlokkeer');
});

Fiddle

Fiddle

【讨论】：

另外 jquery 的 toggleClass 是添加/删除类的替代方法。 api.jquery.com/toggleClass
@ThaddeusAlbers 非常好。我忘记了... :) 它只是一行..
如果元素开始时没有doDEBlokkeer 或doBlokkeer 类，使用toggleClass 会产生不想要的结果。
@Marcel 在这里查看 OP 试图实现的目标的可能性很小。他可能已经设置了一个类，因为他正在将事件绑定到它们。
PSL 天哪，你真的让我很开心.. 这就像一个魅力！非常感谢您的解释

【解决方案2】：

另外，请考虑一下：

$('li').click(function()
{
    var $this = $(this),
        one = 'doBlokkeer',
        two = 'doDEBlokkeer';

    if ( $this.hasClass(one) ) {
        $this.removeClass(one).addClass(two);
    } else {
        $this.removeClass(two).addClass(one);
    }
});

【讨论】：

【解决方案3】：

使用.toggleClass

$('li.doBlokkeer').click(function(e) {
    $(this).toggleClass('doDEBlokkeer');
});

不需要第二次点击事件

【讨论】：

【解决方案4】：

问题如前所述，您将事件绑定到具有给定类名的元素，然后单击更改类名，因此处理程序不再监听它...

我建议坚持使用事件委托，因为它更轻巧，而且您还可以在 lis 中嵌套元素（如链接或 div 等）：首先将'cls' 类添加到您的<ul>，所以<ul class="cls">。您的 HTML 可能如下所示：

<ul class="cls">
    <li class="doBlokkeer"><div>Click on me</div></li>
    <li class="doDEBlokkeer">Click on me</li>
    <li class="doBlokkeer">Click on me</li>
    <li class="doBlokkeer">Click on me</li>
</ul>

您现在需要的 JavaScript 就是：

$('.cls').on('click', '.doDEBlokkeer, .doBlokkeer', function (e) {
    $(this).toggleClass('doDEBlokkeer doBlokkeer');
});

...这需要 jQuery 1.7。如果您只有 jQuery 1.4.2 及更高版本，您可以使用 '.delegate()`

$('.cls').delegate('.doDEBlokkeer, .doBlokkeer', 'click', function (e) {
    $(this).toggleClass('doDEBlokkeer doBlokkeer');
});

该事件（并且只有一个）现在在 ul 上，.on() 挑选出由您传递的类名定义的正确元素。

我更新了fiddle from PSL

【讨论】：