Question

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.

Answer 1

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.