-1

これは私のhtmlコードです:

<div class="floor">
    <div id="article">
        <h2>TextFirst</h2>
        <img src="pic1.jpg" />
        </div>
    </div>
    <div id="article">
        <h2>TextSecond</h2>
        <img src="pic2.jpg" />
        </div>
    </div>
    <div id="article">
        <h2>TextThird</h2>
        <img src="pic3.jpg" />
        </div>
    </div>
</div>

今、私はJQueryでこれをやりたいです:正確な#articleの画像にマウスを合わせると、同じ#acticleのh2がフェードします。どうやってやるの？

これが私のJQueryコードです：

$('.floor #article img').hover(function() {
    $(this - 'img' + 'h2').stop(true, false).animate({color: '#4099FF'}, $animatespeed);
}, function() {
    $(this - 'img' + 'h2').stop(true, false).animate({color: '#000000'}, $animatespeed);
});

これがうまくいかないことはわかっていますが、これが私の考えであり、どうすればそれを実現できるかです。何か助けてください。

4

2 に答える 2

3

要素の最初の ID は一意でなければならないため、クラス属性を使用しますarticle(id を持つ複数の要素がありますarticle) 。

<div class="floor">
    <div class="article">
         <h2>TextFirst</h2>
        <img src="pic1.jpg" />
    </div>
</div>
<div class="article">
     <h2>TextSecond</h2>
    <img src="pic2.jpg" />
</div>
<div class="article">
     <h2>TextThird</h2>
    <img src="pic3.jpg" />
</div>

次に、セレクターが間違っています。thisイベントハンドラー内はdom参照であるため、文字列連結には使用できません。h2探している要素は、ホバーされた要素の兄弟要素であるため、.sibling()以下に示すように使用できます

$('.floor .article img').hover(function() {
    $(this).siblings('h2').stop(true, false).animate({color: '#4099FF'}, $animatespeed);
}, function() {
    $(this).siblings('h2').stop(true, false).animate({color: '#000000'}, $animatespeed);
});
于 2013-10-02T14:42:24.957 に答える
1

あなたの html が間違って</div>います div#article。jquery ハンドラーを同じ ID を持つ複数の要素にバインドすることはできません (最初の塗りつぶしのみがバインドされます) -> 代わりにクラスを使用します

<div class="floor">
    <div class="article">
        <h2>TextFirst</h2>
        <img src="pic1.jpg" />
    </div>
    <div class="article">
        <h2>TextSecond</h2>
        <img src="pic2.jpg" />
    </div>
    <div class="article">
        <h2>TextThird</h2>
        <img src="pic3.jpg" />
    </div>
</div>

あなたのjqueryセレクターは間違っています。このようなものを使用してください。

$('.floor .article img').hover(function() {
    $(this).siblings('h2').fadeOut();
}, function() {
    $(this).parent().find('h2').fadeIn();
});
于 2013-10-02T14:52:28.717 に答える