Question

我有多个具有不同ID名称的div，如下所示：

<div id="person1">
    <img class="imgPerson" src="../images/person1.jpg">
    <div class="personBubble" style="display: none;">
        <div class="extraInfo">
            Sells carrots
        </div>
    </div>
</div>

<div id="person2">
    <img class="imgPerson" src="../images/person2.jpg">
    <div class="personBubble" style="display: none;">
        <div class="extraInfo">
            Sells onions
        </div>
    </div>
</div>

<div id="person3">
    <img class="imgPerson" src="../images/person3.jpg">
    <div class="personBubble" style="display: none;">
        <div class="extraInfo">
            Sells lettuce
        </div>
    </div>
</div>

如你所见，我有person1, person2, person3。我还有这个jQuery函数，当display:block处于悬停状态时为personBubble类设置imgPerson。

$(".imgPerson").hover(
    function () {
        $(".personBubble").fadeIn(150);
    },
    function () {
        $(".personBubble").fadeOut(150);
});

但是，当事件被激活时，显然每个personBubble类都设置为display:block，因为它们都具有相同的名称。我只希望这发生在相应的personBubble上，即如果person1的imgPerson处于悬停状态，则只应将person1的personBubble设置为display: block。

实现这一目标的最佳方法是什么，而不必为每个人使用唯一ID，并且必须为每个ID编写相同的jQuery函数？

Answer 1

您可以参考指向当前上下文的this对象，并调用siblings()方法在当前上下文中搜索具有相应类名.personBubble的兄弟。

$(".imgPerson").hover(
    function () {
       $(this).siblings(".personBubble").fadeIn(150);
    },
    function () {
       $(this).siblings(".personBubble").fadeOut(150);
   }
);

Live Demo @ JSFiddle

Answer 2

您可以使用$(this)使用事件源对象来获取下一个personBubble

$(".imgPerson").hover(
    function () {
        $(this).next(".personBubble").fadeIn(150);
    },
    function () {
        $(this).next(".personBubble").fadeOut(150);
});

Answer 3

由于imgPerson和personBubble是兄弟姐妹，所有你需要做的就是使用兄弟姐妹（）

我建议你使用fadeToggle（）它会让你的代码更短，更短更好。

$(".imgPerson").hover(function(){
   $(this).siblings().fadeToggle(150);
});

jQuery如何为具有相同类名

3 个答案: