Hinzufügen oder Entfernen von Klasse von allen li in einer ungeordneten Liste mit Ausnahme des aktuell li mit jQuery

Question

Hier ist meine HTML-Struktur

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

Wenn ich innerhalb von einem der transparenten li den Anker klicken ich es opaque festlegen möge und alle anderen li's innerhalb der ul bis transparent.

Irgendwelche Ideen, wie man das effizient macht?

Answer 1

Sie können etwas tun:

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

Aber wenn Sie wirklich nur zwei Zustände darstellen, die nie zusammen kommen, warum nicht nur eine Klasse verwenden , dessen Abwesenheit den zweiten Zustand darstellt? Dann würden Sie dieses:

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

Answer 2

Etwas wie folgt aus:

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

Answer 3

Wie über diese Lösung:

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