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

查看此Demo，希望这是您正在寻找的内容，并且比您的示例更轻量级。

jQuery父或查找方法

4 个答案: