Question

什么是每个链接只触发一次翻转而不是在页面上全部触发的最佳方法。见：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>

Answer 1

这应该适合你。

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

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

Answer 2

在你的事件处理程序中，尝试使用$（this）.find（“。caption”）。

$(".content #display li a").mouseenter(function(){
  $(this).find(".caption").slideDown(400);
});

Answer 3

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

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

N.B我也可能想要使用hover intent这样的东西，这样如果你在屏幕上滑过很多图像，就不会向用户显示难看的动画效果。

什么是每个链接只触发一次翻转的最佳方式？

3 个答案: