1

「PIC」という単語にカーソルを合わせて画像を開きたいのですが、同じセクションに10個以上あり、それぞれがPICの要素の特定の画像を表示する必要があります。

<h6 id="pic1" class="pic"> PIC</h6>
<div id="img_pic1" class="imgpic" style="display:none"><imgsrc="img/image1.jpg"/></div>

<h6 id="pic2" class="pic"> PIC</h6>
<div id="img_pic2" class="imgpic" style="display:none"><img src="img/image2.jpg"/>/div>

<h6 id="pic3" class="pic"> PIC</h6>
<div id="img_pic3" class="imgpic" style="display:none"><img src="img/image3.jpg"/>/div>

ect....。

<script>
$('h6.pic').mouseenter(function(){
$('div.img_pic').fadeIn();
}).mouseleave(function(){
$('div.img_pic').fadeOut();
});
</script>

これは正常に機能しますが、ホバーしたPICの画像のみを開く代わりに、すべての画像を開きますか？どんな助けでもありがたいです。どうもありがとうございます。

4

3 に答える 3

1

これを試して

<script>
   $('h6.pic').mouseenter(function(){
    $(this).next().fadeIn();
       }).mouseleave(function(){
    $(this).next().fadeOut();
    });
</script>

このフィドルを確認してください

また、あなたはあなたのdivを適切に閉じていません

<img src="img/image2.jpg"/>/div>

更新されたコード

更新されたフィドル

その場合は、これを試すことができます

$('h6.pic').mouseenter(function() {
        console.log($(this).next('div'))
        $(this).next().next('.imgpic').fadeIn();
    }).mouseleave(function() {
        $(this).next().next('.imgpic').fadeOut();
    });​

// また

$('h6.pic').mouseenter(function() {
            console.log($(this).next('div'))
            $(this).next().next().fadeIn();
        }).mouseleave(function() {
            $(this).next().next().fadeOut();
        });​
于 2012-09-21T22:03:01.963 に答える
1

$（this）-現在の要素を参照-およびnext（） -現在の要素の直後の要素を使用する必要があります

$('h6.pic').mouseenter(function(){
    $(this).next('div.imgpic').fadeIn();
}).mouseleave(function(){
    $(this).next('div.imgpic').fadeOut();
});

セレクターにもタイプミスがありました

$('div.img_pic') // <-- your class is imgpic without the _
于 2012-09-21T22:03:10.263 に答える
0

私見、この$(this).next()アプローチの使用は少し柔軟性がありません。data-*各見出し要素のターゲット写真を指す属性を添付することで、少し異なる方法でアプローチします。

<h6 id="pic1" class="pic" data-target="img_pic1"> PIC</h6>
<div id="img_pic1" class="imgpic" style="display:none"><img src="img/image1.jpg"/></div>

<h6 id="pic2" class="pic" data-target="img_pic2"> PIC</h6>
<div id="img_pic2" class="imgpic" style="display:none"><img src="img/image2.jpg"/></div>

<h6 id="pic3" class="pic" data-target="img_pic3"> PIC</h6>
<div id="img_pic3" class="imgpic" style="display:none"><img src="img/image3.jpg"/></div>​

次に、jQueryは次のようになります。

$('h6.pic').each(function () {
  var target = $(this).data('target');
  $(this).mouseenter(function () {
    $('#' + target).fadeIn();
  }).mouseleave(function () {
    $('#' + target).fadeOut();
  });         
});​

なんてこった、これがフィドルだ。</ p>

于 2012-09-21T22:56:48.233 に答える