Question

我正在尝试仅在点击的元素上添加该类

但有时我看到有两件物品被选中，请你告诉我如何解决这个问题

这是我的代码

$(document).on('click', '.resp-tabs-list li', function(event){
    $(".resp-tabs-list li ").removeClass('resp-tab-active');
    $(this).addClass('resp-tab-active');
});

Fiddle

Answer 1

我假设＆＃34;有时＆＃34;当您在LI的快速点击时发生：

使用event.stopPropogation()确保在您需要时正确进行样式设置。

Fiddle

$(document).on('click', '.resp-tabs-list li', function(event){
    event.stopPropagation();
    $(".resp-tabs-list li ").removeClass('resp-tab-active');
    $(this).addClass('resp-tab-active');
});

Answer 2

建议是尽可能将事件委托给最近的静态父级。由于来自根的元素的查找时间，委派给document非常昂贵。

每次事件都从文档根开始，它会查找每个元素以查找特定的类名。

如果您没有动态元素，那么您根本不需要event delegation：

$(staticParent).on('click', '.resp-tabs-list li', function(event) {
    $(".resp-tabs-list li ").removeClass('resp-tab-active');
    $(this).addClass('resp-tab-active');
});

有时在查找中，由于事件委派和类名的使用，它往往很慢。如您所知 ID选择器更快，因此您也可以使用它。

$(staticParentID).on('click', '#resp-tabs-list li', function(event) {
    $("#resp-tabs-list li").removeClass('resp-tab-active');
    $(this).addClass('resp-tab-active');
});

Answer 3

试试这段代码。

    $('.resp-tabs-list li').on('click',function(){

       $(this).parent().children().removeClass('resp-tab-active');

       $(this).addClass('resp-tab-active');
    });

仅在这种情况下如何在单击的元素上添加类

3 个答案: