1

我有一个照片库。每张照片都有一个列表，当用 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 方法，但所有尝试都没有奏效。

感谢你的帮助！

4

4 回答 4

2

您需要上移然后再下移 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();
});​
于 2012-07-06T17:24:33.410 回答
1

用通用方法做到这一点试试这个

$(".rating li").hover(function(){
    $(".ratingDesc:eq(" + $(".rating li").index(this) + ")").show();
}, function(){
    $(".ratingDesc:eq(" + $(".rating li").index(this) + ")").hide();
});
于 2012-07-06T17:30:35.820 回答
0

您可以重用代码，而不是根据元素的索引对名称进行硬编码。我设置了一个 JSFiddle 给你看。

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

于 2012-07-06T17:32:00.943 回答
-1

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

于 2012-07-06T17:24:21.993 回答