Question

这是我的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);
});

我知道这不起作用，但这是我的想法，我怎么能完成它。有什么帮助吗？

Answer 1

元素的第一个ID必须是唯一的，因此请使用article的class属性（您有多个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);
});

Answer 2

您的html错误 - 每</div>下额外div#article。您不能将jquery处理程序绑定到具有相同id的多个元素（仅限第一个填充） - ＆gt;改用类

<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();
});

如何在jQuery选择器中混合“this”和字符串？

2 个答案: