Question

我有一组图标，当你将鼠标悬停在一个图标上时，该组中的其他图标会淡出。我能够使用更长的选择器来做到这一点，但是我想尝试使用siblings（）选择器，但我无法让它工作。我在这里错过了什么？感谢

<div id="picks" class="section">
    <div class="pick left">
        <img src="images/p_mary.jpg" />
        <div class="icons">
            <a href="#" ><img src="images/i_imdb.png" /></a>
            <a href="#" ><img src="images/i_imdb.png" /></a>
            <a href="#" ><img src="images/i_imdb.png" /></a>
            <a href="#" ><img src="images/i_imdb.png" /></a>
        </div>
    </div>
</div>

然后是javascript：

$("#picks").find("a > img").hover(function () {
    $(this).siblings().stop().fadeTo(0, .3);
    $(this).stop().fadeTo(0,1);
}, function () {
    $(this).siblings().stop().fadeTo(500, 1);
});

Answer 1

我认为选择器实际上是针对img try：

$(this).parent().siblings().children().stop().fadeTo(0, .3);

对于所有可能尝试：

var siblings = $(this).parent().siblings(); 
for(var s = 0; s < siblings.length; s++){ 
     $(siblings[s]).children().stop().fadeTo(0,.3);
}

Answer 2

兄弟姐妹（）函数的问题在于它返回同一级别的兄弟姐妹。

如果您要执行以下操作，例如：

$("#picks").find(".icons a").hover(function () {
    $(this).siblings().stop().fadeTo(0, .3);
    $(this).stop().fadeTo(0,1);
}, function () {
    $(this).siblings().stop().fadeTo(500, 1);
});

这应该使链接消失，因为“a”标签在同一级别上，因此是“兄弟姐妹（）”工作方式的兄弟姐妹。使用“a＆gt; img”选择所有img标签......但没有一个有兄弟姐妹......

看看这段代码：

<a href="#">
  <img src="image.gif" />
  <img src="image.gif" />
  <img src="image.gif" />
</a>

这里的img标签有兄弟姐妹......我希望这对你来说已经足够清楚。

Answer 3

像这样：

$('.icons > a').hover(function() {
    $(this).siblings().stop().fadeTo(300, 0.2);
}, function() {
    $(this).siblings().stop().fadeTo(300, 1);
});

小提琴： http://jsfiddle.net/5jvmK/3/

性能提升

使用上述技术，它将为所有匹配的元素附加悬停事件。如果页面上有很多图标，则性能可能会很低。相反，您可以使用.delegate来提高性能：

$('.icons').delegate('a', 'hover', function(event) {
    if (event.type == 'mouseenter') {
       $(this).siblings().stop().fadeTo(300, 0.2);
    }
    else
    {
       $(this).siblings().stop().fadeTo(300, 1);
    }
});

这会将一个事件附加到JUST .icons上，并会触发匹配选择器a上的事件。

假设您有20个<div class="icons">，每个都有自己的，比方说4个图标。用：

.hover ：它会将80个事件附加到DOM（20 * 4）。
.delegate ：它只会附加20个。这是 400％的性能提升。

小提琴： http://jsfiddle.net/5jvmK/5/

兄弟姐妹（）没有按预期工作

3 个答案:

性能提升