jquery - 多个类操作

Question

当您将鼠标悬停在图像上方时,我会在图像上方滑动一个简单的滑动框以显示一些信息.这工作正常,但我在同一页面上有多个图像,所以当你将鼠标悬停在任何图像上时,所有的框都会向上滑动.

是否有一种简单的方法可以对此进行排序,只有悬停在上方的图像才会滑动？或者它是否基本上创建相同的代码,说明每个图像缩略图的不同ID？

继承人jquery - 随意纠正这个片段中的任何错误,因为我对它很陌生

$('#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');
});

和继承人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>

谢谢

Answer 1

jQuery将目标元素传递给事件处理程序this.因此,您可以执行以下操作:

$("#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');
   });

...它将分别适用于每个缩略图.这里的关键是this在选择要显示/动画的子项时为jQuery函数指定上下文(- 事件目标).