0

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

4

4 回答 4

3

问题是您正在绑定类选择器上的事件（对于当时存在于 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');
});

小提琴

小提琴

于 2013-09-19T19:08:33.260 回答
0

另外，请考虑这一点：

$('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);
    }
});
于 2013-09-19T19:18:16.813 回答
0

使用.toggleClass

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

不需要第二次点击事件

于 2013-09-19T19:18:38.827 回答
0

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

我建议坚持使用事件委托，因为它更轻，而且您还可以在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()挑选出由您传递的类名定义的正确元素。

我从 PSL更新了小提琴

于 2013-09-20T16:39:58.193 回答