Ajouter ou supprimer la classe de tous les Li dans une liste non ordonnée, sauf la li actuelle avec jQuery

Question

Voici ma structure HTML

<ul class="checklist"> 
    <li class="opaque"><a href="">Link</a></li> 
    <li class="transparent"><a href="">Link</a></li> 
    <li class="transparent"><a href="">Link</a></li> 
</ul> 

Lorsque je clique sur l'ancre dans l'un que je veux de la li transparent pour le mettre à opaque et tous les autres li dans le ul à transparent.

Des idées sur la façon de le faire efficacement?

Answer 1

Vous pouvez faire quelque chose comme ceci:

$('document').ready(function(){ 
    $('ul.checklist').find('a').click(function(){ 
    $(this) 
     .parent().addClass('opaque').removeClass('transparent') 
     .siblings().addClass('transparent').removeClass('opaque'); 
    }); 
}); 

Mais si vous êtes vraiment que représentant deux états qui se produisent jamais ensemble, pourquoi ne pas simplement utiliser une classe , dont l'absence représente le second état? Ensuite, vous auriez ceci:

$('document').ready(function(){ 
    $('ul.checklist').find('a').click(function(){ 
    $(this) 
     .parent().addClass('opaque') 
     .siblings().removeClass('opaque'); 
    }); 
}); 

Answer 2

Quelque chose comme ceci:

$('.checklist a').click(function(){ 
    $(this).closest('li') // get current LI 
     .removeClass('transparent') 
     .addClass('opaque') 
     .siblings() // get adjacent LIs 
     .removeClass('opaque') 
     .addClass('transparent'); 
}); 

Answer 3

Que diriez-vous de cette solution:

$("li.transparent a").bind("click", function(){ 
    $("ul.checklist li").attr("class", "transparent"); 
    $(this).parent().attr("class", "opaque"); 
});