Reputation: 723
Here is my HTML structure
<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>
When I click the anchor within one of the transparent li's I want to set it to opaque
and all the other li's within the ul to transparent
.
Any ideas on how to do this efficiently?
Upvotes: 1
Views: 9141
Reputation: 1100
How about this solution:
$("li.transparent a").bind("click", function(){
$("ul.checklist li").attr("class", "transparent");
$(this).parent().attr("class", "opaque");
});
Upvotes: 0
Reputation: 108376
Something like this:
$('.checklist a').click(function(){
$(this).closest('li') // get current LI
.removeClass('transparent')
.addClass('opaque')
.siblings() // get adjacent LIs
.removeClass('opaque')
.addClass('transparent');
});
Upvotes: 0
Reputation: 23943
You can do something like this:
$('document').ready( function(){
$('ul.checklist').find('a').click( function(){
$(this)
.parent().addClass('opaque').removeClass('transparent')
.siblings().addClass('transparent').removeClass('opaque');
});
});
But if you're really only representing two states that never occur together, why not just use one class, the absence of which represents the second state? Then you'd have this:
$('document').ready( function(){
$('ul.checklist').find('a').click( function(){
$(this)
.parent().addClass('opaque')
.siblings().removeClass('opaque');
});
});
Upvotes: 7