jQuery Parent or Find Method

Question

我有一个照片库。每张照片都有一个列表，当用CSS格式化时，看起来像三个大方块（这是我的评级系统）。当用户将鼠标悬停在方块上时，列表下方会显示说明。这适用于单张照片，但是当我将鼠标悬停在第一张照片的正方形上时，将显示所有照片的描述。

<div class="ratingContainer">
    <ul class="rating">
        <li class="one"></li>
        <li class="two"></li>
        <li class="three"></li>
    </ul>
    <div class="ratingDesc1">Bad</div>
    <div class="ratingDesc2">Normal</div>
    <div class="ratingDesc3">Good</div>
</div>

我的jQuery...

$(".rating li.one").hover(function(){
    $(".ratingDesc1").show();
}, function(){
    $(".ratingDesc1").hide();
});

$(".rating li.two").hover(function(){
    $(".ratingDesc2").show();
}, function(){
    $(".ratingDesc2").hide();
});

我已经阅读了这个，似乎我需要使用 .parent 或 .find 方法，但所有尝试都没有奏效。

感谢您的帮助！

Answer 1

你需要上升然后回到 DOM：

$(".rating li.one").hover(function() {
    $(this).parents('.ratingContainer').find(".ratingDesc1").show();
}, function() {
    $(this).parents('.ratingContainer').find(".ratingDesc1").hide();
});​

您还可以使用更通用的方法，而不是为每个评级编写单独的案例，请使用以下内容：

$(".rating li").hover(function() {
    $(this).parents('.ratingContainer').find('div:eq(' + $(this).index() + ')').show();
}, function() {
    $(this).parents('.ratingContainer').find('div:eq(' + $(this).index() + ')').hide();
});​

Answer 2

要在泛型方法中执行此操作，请尝试此操作

$(".rating li").hover(function(){
    $(".ratingDesc:eq(" + $(".rating li").index(this) + ")").show();
}, function(){
    $(".ratingDesc:eq(" + $(".rating li").index(this) + ")").hide();
});

Answer 3

您可以重用代码，而不是通过基于元素的索引来硬编码名称。我设置了一个JSFiddle供您查看。

http://jsfiddle.net/3pLr5/6/

Answer 4

查看此演示，希望它就是您正在寻找的，并且比您的示例更轻量级。