1

私は写真のギャラリーを持っています。各写真にはリストがあり、CSS でフォ​​ーマットすると 3 つの大きな正方形のように見えます (これは私の評価システムです)。ユーザーが四角の上にカーソルを合わせると、リストの下に説明が表示されます。これは 1 枚の写真ではうまく機能しますが、最初の写真の四角の上にカーソルを合わせると、すべての写真の説明が表示されます。

<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 に答える