在jQuery中切换元素风格的最佳和最快的方式？

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

<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 2

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

你可以做什么，是存储变量将举行的最后一项选择，这样你就可以溜第一个CSS类选择。

var lastItem; 

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

Answer 3

这是最简单的在文档级别来处理一切，使得添加和删除类的逻辑可以组合成一个处理程序，而且也没有必要unecessarily阻止事件传播。

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

如果点击没有从li.dataItem来，然后$(e.target).closest('li.dataItem')将返回一个空的jQuery对象，addClass不会有任何效果。