2

私はjqueryを学んでおり、これに対して数日間頭を悩ませてきました。大きな注目の画像が 1 つと、その下に小さなサムネイルが 4 つあるページを作成しようとしています。ユーザーがサムネイルにカーソルを合わせたときに、注目の画像を変更する必要があります。

マウスを A の上に置いたときに B を切り替えます。しかし、マウスを C の上に置いたときに D を切り替えます。現在起こっていることは、すべての pshow クラスが同時に切り替わることです。$(this) を使用して現在の要素を切り替える必要がありますか? 変数を使用する必要がありますか?

同様の質問についてスタックオーバーフローを検索してきましたが、何も見つかりませんでした。これが重複している場合は申し訳ありません。これは正しいアプローチですか??

Jクエリ

<script type="text/javascript"> 
    $(document).ready(function () {
        $('.hover').mouseenter(function() {
        $('.pshow').toggle();
        });
    });
</script>

HTML

<div id="story1">
    <a href="#"><h2 class="hover">Story #1 Text</h2></a>
    <img class="pshow" style="display:none" src="#" >
</div>


<div id="story2">
    <a href="#"><h2 class="hover">Story #1 Text</h2></a>
    <img class="pshow" style="display:none" src="#" >
</div>


<div id="story3">
    <a href="#"><h2 class="hover">Story #1 Text</h2></a>
    <img class="pshow" style="display:none" src="#" >
</div>
4

3 に答える 3

2

私はこのようにします...

の代わりに を にclass入れますdivH2

<div class="hover"  id="story1">

次に、あなたのJquery...

 $('.hover').mouseenter(function() {
     $('.pshow').hide();
    $(this).find('.pshow').toggle();
    });

デモはこちら

于 2013-08-10T20:56:15.940 に答える
0

class を持つ要素を 1 つだけ選択するようにセレクターを変更する必要がありますpshow。次のようにできます。

<script type="text/javascript"> 
$(document).ready(function () {
    $('.hover').mouseenter(function() {
         $(this).closest('div').find('img.pshow').toggle();
    });
});
</script>
于 2013-08-10T20:53:07.843 に答える