javascript - jQuery如何为具有相同类名的多个元素激活一个事件

我有多个具有不同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函数？

最佳答案

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

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

Live Demo @ JSFiddle