permutation d'une image lorsque le sélecteur est cliqué en utilisant jquery

Question

J'ai une FAQ et je voudrais joindre une image à la droite de la question qui dit à la personne de fermer si elle est ouverte et ouverte si elle est fermée.

C'est ce que j'ai:

$('.header-person').click(function() { 
    $(this).next('.entry').slideToggle("fast") 
    return false; 
}); 

J'ai actuellement les deux images à côté de la question comme ceci:

question 1   

<span class="icon"><img src="open.png" width="16" height="16" border="0" /></span> 


<span style="display:none;" id="icon-delete"><img src="close-32.png" width="16" height="16" border="0" /></span> 

Merci!

Answer 1

Inutile d'envelopper vos images par intervalles. Vous pouvez simplement placer la classe pour chaque image directement dessus, et la changer de cette façon. En outre, vous voudrez peut-être faire attention aux fonctionnalités de .next(), car cela pourrait ne pas fonctionner comme vous le souhaitez. Il saisit seulement le immédiat prochain frère. Cela signifie que s'il y a des frères et sœurs entre l'élément sur lequel vous l'appelez et celui que vous recherchez, vous ne le trouverez pas.

Vérifiez la documentation .next(): http://api.jquery.com/next/

Essayez plutôt à l'aide .nextAll() avec un sélecteur de filtre pour trouver l'élément que vous voulez.

Documentation pour .nextAll(): http://api.jquery.com/nextAll/

Cela étant dit, voici une démo qui fait ce que vous voulez (je pense): http://jsfiddle.net/Ender/9eXnW/1/

Fondamentalement, ce que vous voulez faire est assurez-vous que vous avez la visibilité de chacune des images définies correctement pour commencer, puis sélectionnez-les et appelez .toggle() sur eux dans votre événement de clic.

Vérifiez le code:

$(function() { 
    $('.entry').hide(); 
    $('.header-person').click(function(e) { 
     e.preventDefault(); 
     $(this).nextAll('.entry:first').slideToggle("fast"); 
     $(this).children('.close-icon, .open-icon').toggle(); 
    }); 
}); 

De plus, je l'ai changé votre return false; à e.preventDefault()

Answer 2

S'il vous plaît mettre le code complet afin que nous puissions voir quels sélecteurs nous pouvons utiliser.

Mais au fond, il semble que tout ce que vous devez faire est la suivante:

$(selectorforopen).toggle(); 
$(selectorforclosed).toggle(); 

Cela montre essentiellement si elle est cachée et se cache si elle est pas affiché.