JS: (jQuery) Na klik een class toevoegen

Ik heb een unsorted list die als volgt is opgemaakt:

<li id="een" class="test"> <a class="thumb" href="img/punk.jpg" title="Title #0"> <div style="background: url(img/thumb_1.jpg) no-repeat;"> <div class="gradient_overlay"></div><span class="titel">Gran Via</span> </div> </a> </li>

Nu heb ik het al voor elkaar gekregen dat als 1 van de list items een div bevat "gradient_overlay_hidden" dat deze na een click veranderd word naar "gradient_overlay". Ik krijg het alleen niet voor elkaar om op dezelfde click ook de class van de <span> te veranderen.

De jquery code:

$(function() { $('ul.thumbs li').click(function(){ $('li.test a div').find('.gradient_overlay_hidden').removeClass().addClass("gradient_overlay");// Deze werkt $('li.test a div').find('.titel').removeClass().addClass("titel-inactief"); // Deze niet }) });

Iemand die me hierbij een beetje in de juiste richting kan sturen?

Robert

$('li.test a div').find('.titel')

Weet je zeker dat dit wel klopt?

Nee, ik denk ook dat het daar in zit...dat hij class="titel" gewoon niet kan vinden.

Heb dit ook geprobeerd, maar werkt ook niet:

$('li.test a div span').find('.titel')

Probleem is dat je alles selecteert ongeacht waarvandaan de click wordt aangeroepen. Met $(this) begin je in de huidige context.

Dit werkt bij mij:

$(this).find('a div .gradient_overlay_hidden').removeClass().addClass("gradient_overlay"); $(this).find('a div .titel').removeClass().addClass("titel-inactief");

Wel vreemd aangezien jouw code ALLE matchende classes zou moeten veranderen terwijl het klinkt alsof ie er bij jou geen doet.

-snip-

Ik moest '.titel_actief' hebben ipv '.titel'

$('li.teste a div').find('.titel_actief').removeClass().addClass("titel-inactief");

Toch bedankt voor de reacties, sorry voor de tijdverspilling ^^

Robert (Was zich al een uurtje of 2 aan het opvreten)

Blijft feit dat je alle li's matched... ?

Waar dan? Hij selecteerd alle LI's met de klasse teste.

BTW: dit is het zelfde
$('li.teste a div').find('.titel_actief')
als
$('li.teste a div .titel_actief')
of
$('li.teste .titel_actief')
en nog korter
$(".titel_actief")

Volgens mij is dat niet wat TS wil, hij wil volgens mij alle .titel_actief hebben binnen het aangeklikte element en niet alle .titel_actief.

Je bent zoiezo een ; vergeten aan het eind van je click function:
Deze is getest en werkt:

$(function() { $('ul.thumbs li a').click( function(){ $('ul.thumbs li a div').find('.gradient_overlay_hidden').removeClass().addClass("gradient_overlay"); $('ul.thumbs li a div').find('.titel').removeClass().addClass("titel-inactief"); }); });

<li id="een" class="test"> <a class="thumb" href="img/punk.jpg" title="Title #0" onclick="return false;"> <div style="background: url(img/thumb_1.jpg) no-repeat;"> <div class="gradient_overlay_hidden"></div> <span class="titel">Gran Via</span> </div> </a> </li>

Succes