jQuery-多个类动作 [英] jquery - Multiple class actions

问题描述

我有一个简单的滑动框，当您将鼠标悬停在图像上方时，它会在图像上方滑动以显示一些信息.效果很好，但我在同一页面上有多张图像，因此当您将鼠标悬停在任何图像上时，所有框都向上滑动.

I've a simple sliding box slide up over an image to display some info when you hover over the image. This works fine but i have multiple images on the same page so when you hover over any of the images all of the boxes slide up.

是否有一种简单的方法可以对这种图像进行排序，以便仅将您悬停的图像向上滑动?还是基本上是创建相同的代码来为每个图像缩略图指定不同的ID?

Is there a simple way to sort this so only the image you hover over slides up? Or is it basically creating the same code stating different ID's for each image thumbnail?

在这里使用jquery-可以更正此代码段中的所有错误，因为我对此很陌生

Heres the jquery - feel free to correct any errors in this snippet as i'm very new to it

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

谢谢

推荐答案

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

jQuery passes the target element to event handlers as this. Therefore, you can do something like:

$("#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-事件目标).

...and it'll work for each thumbnail individually. Key here is specifying a context (this - the event target) to the jQuery function when selecting children to show / animate.

这篇关于jQuery-多个类动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！