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