jquery - 悬停链接时更改内容 div

Question

对于一个商业网站，我试图实现以下目标: - 包含客户评价的 div。 - 包含这些客户 Logo 的列表。

当用户将鼠标悬停在 Logo 上时，正确的评价应显示在 div 中。

我有以下标记:

<div id="testimonial-container"><div class="testimonial">Here comes a testimonial</div>
    <div class="testimonial">Here comes another testimonial</div>
    <div class="testimonial">And another one</div>
    <ul class="testimonial-logos">
       <li><a><img src="logo-1.jpg" /></a></li>
       <li><a><img src="logo-2.jpg" /></a></li>
       <li><a><img src="logo-3.jpg" /></a></li>
    </ul>
</div>

悬停效果将使用 CSS 完成(不透明度:0 和 1)，因此它并不是真正的 slider 。

要将类添加到事件推荐中，我使用以下代码:

jQuery('#testimonial-container .testimonial-logos a').hover(function(){
    jQuery('#testimonial-container .testimonial, #testimonial-container .testimonial-logos a').addClass('active');
});

有什么想法如何切换 div 中的推荐吗？提前致谢!

Answer 1

假设推荐的顺序与相应 Logo 的顺序相同，那么类似的内容将起作用(放置在文档就绪处理程序中或正文末尾的脚本 block 中):

var $container = $("#testimonial-container"),
    $testimonials = $(".testimonial", $container).hide();

$(".testimonial-logos li", $container).hover(function() {
    $testimonials.eq( $(this).addClass("active").index() ).show();
}, function() {
    $testimonials.eq( $(this).removeClass("active").index() ).hide();
});

演示: http://jsfiddle.net/YG5aV/3

这会缓存一个包含推荐 div 的 jQuery 对象，并立即将它们全部隐藏。然后在悬停处理程序中，当鼠标进入时，它会显示与悬停的 Logo 相对应的 Logo ，当鼠标离开时，它会再次隐藏它。

更新:如果目的是仅在鼠标输入而不是鼠标输入和离开时执行某些操作，那么我建议使用 .mouseenter() 而不是 .hover() 因为后者是分配进入处理程序和离开处理程序的快捷方式。以下内容执行您在评论中描述的操作 - 请注意末尾的 .eq(0).mouseenter() ，它会触发第一个 li 元素的 mouseenter，以便它将成为事件元素开始于。

var $container = $("#testimonial-container"),
    $testimonials = $(".testimonial", $container).hide(),
    $prev;

$(".testimonial-logos li", $container).mouseenter(function() {
    if ($prev)
       $testimonials.eq( $prev.removeClass("active").index() ).hide();
    $testimonials.eq( ($prev = $(this).addClass("active")).index() ).show();
}).eq(0).mouseenter();

演示:http://jsfiddle.net/YG5aV/4/