demo

Question

单击项目时添加currentSelected类，如果选择其他项目，则删除先前选择的项目currentSelected类。单击项目列表外部时删除currentSelected类。

<ul>
    <li class="dataItem currentSelected">item 1</li>
    <li class="dataItem"> item 2</li>
    <li class="dataItem"> item 3</li>
    <li class="dataItem"> item 4</li>
</ul>

Answer 1

最简单的方法是处理文档级别的所有内容，以便添加和删除类的逻辑可以合并到一个处理程序中，并且不需要不必要地阻止事件传播。

$(document).click(function(e) {
    $('li.dataItem').removeClass('currentSelected');
    $(e.target).closest('li.dataItem').addClass('currentSelected');
});

如果点击不是来自li.dataItem，那么$(e.target).closest('li.dataItem')将返回一个空的jQuery对象，而addClass将无效。

Answer 2

<ul id="myul">
    <li class="dataItem currentSelected">item 1</li>
    <li class="dataItem"> item 2</li>
    <li class="dataItem"> item 3</li>
    <li class="dataItem"> item 4</li>
</ul>

$('#myul li.dataItem').click(function(e){
   $(this).addClass('currentSelected')
   .siblings('.currentSelected')
   .removeClass('currentSelected');
   e.stopPropagation();
});

$(document).click(function(){
   $('.currentSelected')
       .removeClass('currentSelected');
});

demo

Answer 3

$('li').click(function(){
    $('.currentSelected').removeClass('currentSelected');
    $(this).addClass('currentSelected');
};

你可以做的是存储一个变量，它将保留最后一个项目，这样你就可以滑动第一个css类选择器。

var lastItem;

$('li').click(function(){
    if(lastItem) {
        lastItem.removeClass('currentSelected');
    }
    lastItem = $(this).addClass('currentSelected');
};

在jQuery中切换元素样式的最佳和最快的方法？

3 个答案:

demo