javascript - 改变jquery中的li类

Question

我想改变当前选中的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 个小时了，现在很沮丧......

Answer 1

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

使用事件委托(delegate) (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