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 block 。

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

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