Jquery rimuovere classe da molti, aggiungere classe a uno

Question

un'operazione comune mi ritrovo a fare è la seguente:

<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'); 
}); 

C'è un modo per condensare questo, in qualche modo, combinando $ allLi e $ (questo) e usando toggleClass?

Grazie!

Answer 1

soluzione di Jonathan dovrebbe funzionare bene, ma vorrei proporre una soluzione diversa.

Invece di disattivare tutti gli elementi e quindi selezionare quello corrente, perché non tenere traccia dell'elemento corrente 10 e eseguire solo l'operazione su quello?

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

E '"più a lungo" ma anche più efficiente.

La mia soluzione mira ad avere tutto lo stato in JavaScript piuttosto che parzialmente nel DOM. toggleClass elude questo principio. Non è tanto una questione di "hey sembra un modo davvero lungo e super complesso di fare qualcosa di semplice", c'è un'idea dietro. Se lo stato della tua applicazione diventa più complesso di un solo elemento selezionato, ti imbatterai in problemi se proverai a inserire tale stato nel DOM. Il DOM è solo una "vista", mantieni il tuo stato nel "modello" (il codice JS).

Answer 2

Credo che si potrebbe aggiungere che, e rimuoverlo dai fratelli:

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

Demo: http://jsbin.com/owivih/edit#javascript,html,live