CODEWITHSUNDEEP
jquery
Thierry Savard Saucier
Thierry Savard Saucier

Reputation: 449

variable used withing multiple selector

ok, yet another jquery selector nightmare for me ! I've read about 20 questions with similar topic, but I couldn't find one with my problem ... sorry if it did exist ( probably does somewhere ) its seems pointlessly easy but somehow I can't get it to work.

I have a list of img, and when you click on one, I get hold of its 2nd class. Once I have this second class, I want to hide or show other element who have that class

heres some code to clarify : 

<ul id="thumbail_list">
   <li class="image fantome"><img src="images/fantome.png"/></li>
<ul>

let's say I click on my fantome image I want that somewhere else a paragraph with class texte and fantome which is hidden by default become visible.

$('#thumbail_list li').click(function() {

    var Chosenclass = $(this).attr('class').split(' ')[1];  
    var texte = '.text .' + Chosenclass ;
    var image = '.image .' + Chosenclass ;

    $('.image').fadeIn('slow', function(){
        $(image).fadeOut('slow', function(){
            $(texte).fadeIn('slow');            
        });

    });
}

but I can't get this to work, console doesn't show me any error, and I,ve put alert everywhere and it always show me what I want ... but the invisible text won't show.

Upvotes: 0

Views: 43

Answers (1)

Cranio
Cranio

Reputation: 9847

If the text has both class .text and .fantome, you must chain the selectors:

.text.fantome <- without space

So get rid of the space:

var texte = '.text.' + Chosenclass ;
                ^^^^

With the space you would select an object of class ChosenClass who is child (or descendant) of an element of class .text.

Upvotes: 4

Related Questions