cible des images avec une certaine classe avec jQuery?

Question

Lorsque je clique sur un bouton, je veux appliquer une certaine jQuery (disons fadeOut) à la première image avec la classe my-image.

Lorsque je clique sur ce bouton à nouveau, je veux faire la même chose à la prochaine occurrence dans le balisage d'une image avec la classe mon image.

Les images apparaissent toutes à divers endroits dans le balisage et ne sont pas nécessairement des fratries.

Merci pour toute aide.

Answer 1

Bien que non testé, vous pourriez tirer parti des visibles et premier pseudo-sélecteurs.

$('#mybutton').click(function(){ 
    $('.my-image:visible:first').fadeOut(); 
} 

Si votre fonction est celle qui anime utiliser pas et animés pour vous assurer ne correspondent pas à un moment Affaiblissement:

$('#mybutton').click(function(){ 
    $('.my-image:visible:not(:animated):first').fadeOut(); 
}) 

Pour affiner notre compréhension du filtre méthode , J'ai juste testé la main longue aussi.

$('#mybutton').click(function(){ 
    $('.my-image') 
    .filter(':visible') 
    .not(':animated') 
    .filter(':first') 
    .fadeOut(); 
}) 

Ceci est particulièrement utile au cours du développement pour mettre rapidement les différentes étapes:

$('#mybutton').click(function(){ 
    $('.my-image') 
    .filter(':visible') 
// .not(':animated') 
    .filter(':first') 
    .fadeOut(); 
}) 

Answer 2

Vous pouvez avoir deux classes. Un pour les images qui étaient déjà disparues, et un autre pour celles qui ne l'étaient pas. Comme:

<img src="" alt="" class="not_faded" /> 

et

<img src="" alt="" class="faded" /> 

Maintenant, avec jQuery vous pouvez effectuer les opérations suivantes:

$('#mybutton').click (function(){ 
    $('.not_faded:first').fadeOut(); // your fade out effect 
    $('.not_faded:first').attr ('class', 'faded'); 
}); 

Ce code obtient la première image qui appartient la classe not_faded et rend le fondu effet . Change ensuite la classe de cette image en "fanée". Donc, la première image de la classe not_faded, la prochaine fois, sera la deuxième. Edit: découvrez la solution de Matt, c'est plus élégant et profite pleinement de jQuery.