Question

我想更改当前选择的li（列表）的类

 $('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

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

使用事件委托（jq＆gt; = 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

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

Answer 3

使用.toggleClass

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

不需要第二次点击事件

Answer 4

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

我建议坚持使用事件委托，因为它更轻，你也可以在li s中嵌套元素（如链接或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

在jquery中更改li类

4 个答案: