2010-09-02 5 views
3

Je travaille sur un site avec un rotateur d'images (en utilisant jQuery Roundabout). Je l'ai mis en place dans jQuery que lorsque vous cliquez sur une image, il affiche un certain contenu associé à cette image en utilisant le code suivant:Afficher/Masquer le problème avec le Rotator d'image

$('#brand-cou').click(function() { 
    $('#brand-details .detail-section').fadeOut(0); 
    $('#detail-country-squire').fadeIn("slow"); 
    return false; 
    }); 

Où # marque-COU est le li contenant l'image et # détail- country-squire est la section que je veux montrer. Cela fonctionne très bien, attendez-vous à ce que j'ai aussi une flèche suivante et une flèche précédente, qui est une façon alternative pour les gens de se déplacer dans le rotateur d'image. J'ai du mal à trouver le bon texte à montrer quand ils progressent autour du rotateur en utilisant ces commandes. Voici le code que j'ai maintenant:

$('a#next').click(function() { 
    if ('li'.id = 'brand-cou' && 'li'.hasClass('roundabout-in-focus') { 
     //Do what I need to do 
    } 
    }); 

Lorsque l'image est l'image avant, il reçoit automatiquement la classe « .roundabout en mise au point. » Ma pensée était que je pourrais utiliser une instruction if pour chaque image spécifique pour dire si elle a l'ID de A et aussi la classe de .roundabout-in-focus, puis afficher le texte spécifique de A. Pour une raison quelconque, cela ne fonctionne pas. Cela semble également assez long parce que pour chaque image, j'aurais besoin de tout le code ci-dessus, ainsi que d'une section de bouton précédente similaire à la section suivante. Donc, à court terme, j'adorerais avoir de l'aide pour comprendre pourquoi ma déclaration if ci-dessus ne fonctionne pas. Si quelqu'un se sent vraiment généreux, j'adorerais toute aide sur les pensées des gens sur la façon de condenser ce code. Je me sens comme si je pouvais juste dire, si un LI a à la fois cet ID spécifique et la classe de rond-point, montrer ce texte (qui devrait alors fonctionner si vous cliquez sur l'image ou sur le bouton suivant/précédent) . Mon seul problème est comment écrire ceci sans le lier à une fonction de clic ou quelque chose d'autre qui le rend trop spécifique pour englober les trois options.

Merci pour l'aide!

+0

pouvez-vous mettre aussi la structure html, pour être plus spécifique –

Répondre

0

@JapanPro, bien sûr. Voici le code HTML. Est-ce que cela aide ?:

<ul id="thumbs-brands"> 
    <li id="brand-qua"><a href="#"><img src="../assets/brand-quality-care.png"></a></li> 
    <li id="brand-pro"><a href="#"><img src="../assets/brand-propet.png"></a></li> 
    <li id="brand-cou"><a href="#"><img src="../assets/brand-country-squire.png"></a></li> 
    <li id="brand-big"><a href="#"><img src="../assets/brand-big-red.png"></a></li> 
    <li id="brand-lil"><a href="#"><img src="../assets/brand-lil-red.png"></a></li> 
    <li id="brand-joy"><a href="#"><img src="../assets/brand-joy.png"></a></li> 
    <li id="brand-joypro"><a href="#"><img src="../assets/brand-joy-professional.png"></a></li> 
    <li id="brand-sma"><a href="#"><img src="../assets/brand-small-animal.png"></a></li> 
</ul> <!-- end of thumbs-brands --> 

<div id="thumb-navigation"> 
    <a href="#" id="next">Next</a> 
    <a href="#" id="previous">Previous</a> 
</div>   

<div id="brand-details"> 
    <div id="detail-country-squire" class="detail-section"> 
      //Content Here 
    </div> <!-- end of .detail-body --> 
</div> <!-- end of detail-pro-pet -->