jQuery的许多删除类，添加类到一个

Question

一种常见的操作，我觉得自己做的是以下几点：

<ul> 
    <li>One</li> 
    <li class="current">Two</li> 
    <li>Three</li> 
</ul> 

var $allLi = $('li'); 

$allLi.click(function(){ 
    $allLi.removeClass('current'); 
    $(this).addClass('current'); 
}); 

有没有办法凝聚这一点，不知何故结合$ allLi和$（本）和使用toggleClass？

谢谢！

Answer 1

乔纳森的解决方案应该工作得很好，但我想提出不同的解决方案。

而不是全部解封的元素，然后选择当前一个，为什么不跟踪当前元素，并且只能在执行操作？

<ul> 
    <li>One</li> 
    <li class="current">Two</li> 
    <li>Three</li> 
</ul> 

<script type="text/javascript"> 
    (function() { 
     var current = $("li.current"); 
     $("li").click(function() { 
      current.removeClass("current"); 
      current = $(this); 
      current.addClass("current"); 
     }); 
    }()); 
</script> 

这是“长”而且效率更高。

我的解决方案旨在使所有的状态在JavaScript中，而不是部分在DOM中。 toggleClass绕过这个原则。这不是一个“嘿，看起来这是一个非常复杂而且非常复杂的简单方法”的问题，它背后有一个想法。如果您的应用程序状态变得比仅仅一个选定元素更复杂，那么如果您试图将该状态填充到DOM中，则会遇到问题。 DOM只是一个'视图'，让你的状态保持'模型'（JS代码）。

Answer 2

我相信你可以添加它，并从兄弟姐妹中删除：

$("li").on("click", function(){ 
    $(this) 
    .addClass("current") 
    .siblings() 
     .removeClass("current"); 
}); 

演示：http://jsbin.com/owivih/edit#javascript,html,live