Question

我使用这个脚本来改变一个类：

$('.fa.fa-plus-circle').each(function() {
    $(this).on('click', function () {
        $(this).removeClass().addClass("fa fa-minus-circle");
    });
});

然后我用了

$('.fa.fa-minus-circle').each(function () {
     $(this).on('click', function () {
        $(this).removeClass().addClass("fa fa-plus-circle");
     });
});

因此，对于第一个加载页面时默认的“fa.fa-plus-circle”，一切都很好，类也会发生变化。但是当类更改后我无法做任何事情，JQuery继续执行

$('.fa.fa-plus-circle').each(function() {
    $(this).on('click', function () {
        $(this).removeClass().addClass("fa fa-minus-circle");
    });
});

为什么？提前致谢

Answer 1

您需要为此使用委托，因为您要动态添加类。

$(document).on("click", '.fa.fa-minus-circle', function() {
    $(this).removeClass().addClass("fa fa-plus-circle");
});

$(document).on("click", '.fa.fa-plus-circle', function() {
    $(this).removeClass().addClass("fa fa-minus-circle");
});

此外，无需循环遍历用于绑定事件的元素。

但建议的方法是，

$('.fa').click(function() {
    $(this).toggleClass("fa-minus-circle fa-plus-circle");
});

修改

$(document).on("click", ".fa", function() { $(this).toggleClass("fa-minus-circle fa-plus-circle"); });

Answer 2

加载时不是.fa-minus-circle，因此每个循环都不会发生。即使你删除了每个循环（这不是必需的），它也不会添加监听器，因为它找不到选择器。所以，你必须使用on的代理版本，看起来像这样......

$('body').on('click','.fa-minus-circle',function () {
    $(this).removeClass().addClass("fa fa-minus-circle");
});

fwiw，您可以使用一个班级toggleClass然后将所有fa-plus-circle代码放入fa类，因为这是默认行为。

$('body').on('click','.fa',function () {
    $(this).toggleClass("fa-minus-circle");
});

Answer 3

不删除所有课程都有好处。似乎没有必要删除.fa以便您可以添加它。这意味着您的代码应该是：

$(function() {
    $(document).on("click", '.fa.fa-minus-circle', function() {
        $(this).removeClass('fa-minus-circle').addClass("fa-plus-circle");
    });

    $(document).on("click", '.fa.fa-plus-circle', function() {
        $(this).removeClass('fa-plus-circle').addClass("fa-minus-circle");
    });
});

正如@AnoopJoshi指出的那样，你可以使用.toggleClass()方法：

$(function() {
    $('.fa').on('click', function() {
        $(this).toggleClass('fa-minus-circle fa-plus-circle');
    });
});

删除/添加一个类，然后在这个新类上执行一个事件

3 个答案: