0

什么是每个链接只触发一次翻转而不是页面上全部翻转的最佳方式。请参阅：http ://www.4pixels.com/web-design/xweb-design.html 。目前显然，页面上的任何和所有“li a”都会触发我的翻转。我想在每个图像上单独翻转仅由它自己触发。希望这是有道理的。

<script type="text/javascript">
$(document).ready(function(){
  $(".content #display li a .caption").hide();
  $(".content #display li a").mouseenter(function(){
    $(".content #display li a .caption").slideDown(400);
  });
  $(".content #display li a").mouseleave(function(){
    $(".content #display li a .caption").slideUp(400);
  });
});
</script>

<ul id="display">
    <li><a href="/images/websites/PEX-BAFTA_2.jpg" rel="sexylightbox[group1]" title="Caption goes here"><img src="/images/websites/thumbs/PEX-BAFTA_2.jpg" alt="" /><div class ="caption">caption goes here</div></a></li>
</ul>
4

3 回答 3

0

这应该为您解决问题。

  $('.content #display li a').bind('mouseenter mouseleave',function() {
        $('.caption', this).slideToggle(400);
  });

您遇到的问题是事件会触发，然后您使用了选择器。使用它返回触发事件的元素。或多或少...

于 2011-04-05T13:56:29.047 回答
0

在您的事件处理程序中，尝试使用 $(this).find(".caption")。

$(".content #display li a").mouseenter(function(){
  $(this).find(".caption").slideDown(400);
});
于 2011-04-05T13:57:25.293 回答
0

我会使用 jquery 的委托来避免多个事件处理程序。

$("#display").delegate('a', 'mouseenter mouseleave', function(){
  $(this).find(".caption").slideToggle(400);
});

注意，我也可能想使用悬停意图之类的东西，这样如果您在屏幕上滑过许多图像，就不会向用户显示难看的动画堆积。

于 2011-04-05T14:06:42.240 回答