jquery - Plusieurs actions de classe

Question

J'ai une simple glissière glisser sur une image pour afficher quelques informations lorsque vous passez la souris sur l'image. Cela fonctionne très bien, mais j'ai plusieurs images sur la même page, donc quand vous passez la souris sur l'une des images, toutes les boîtes glisser vers le haut.

Existe-t-il un moyen simple de trier ceci afin que seule l'image que vous survolez survienne? Ou est-ce fondamentalement en créant le même code indiquant différents ID pour chaque vignette d'image?

Heres le jquery - ne hésitez pas à corriger les erreurs dans cet extrait que je suis très nouveau pour elle

$('#gallery-inner .thumb .gallery-inner-thumb').hide(); 
$("#gallery-inner .thumb").hover(function() { 
    $("#gallery-inner .thumb .gallery-inner-thumb").show().animate({margin:'-36px 0 0'},'fast'); 
    }, function() { 
    $("#gallery-inner .thumb .gallery-inner-thumb").animate({margin:'1px 0 0'},'fast'); 
}); 

et Heres le bloc html.

<div class="thumb clearfix"> 
    <div class="image"> 
     <a href="#" title="#"><img src="images/simg/pimg.jpg" alt="#"></a> 

     <div class="gallery-inner-thumb clearfix"> 
      <div class="name"><a href="#">Image Name</a></div> 
      <div class="comments"><a href="#">0</a></div> 
     </div> 

    </div> 
</div> 

Merci

Answer 1

jQuery passe l'élément cible de gestionnaires d'événements comme this. Par conséquent, vous pouvez faire quelque chose comme:

$("#gallery-inner .thumb").hover(function() // mouse over target 
    { 
     // select child of target .thumb with class .gallery-inner-thumb 
     $(".gallery-inner-thumb", this) 
     .show().animate({margin:'-36px 0 0'},'fast'); 
    }, 
    function() // mouse off of target 
    { 
     // select child of target .thumb with class .gallery-inner-thumb 
     $(".gallery-inner-thumb", this) 
     .animate({margin:'1px 0 0'},'fast'); 
    }); 

... cela fonctionnera pour chaque vignette individuellement. La clé consiste à spécifier un contexte (this - la cible de l'événement) à la fonction jQuery lors de la sélection des enfants à afficher/animer.