Javascript 触发重复元素的mouseenter和mouseleave

我从MySql获取数据，并将其显示在表中。我希望对于每个包含某个

id

的

在

mouseenter

上显示一些额外信息，并使用jQuery将其隐藏在

mouseleave

上。以下是HTML输出：

<table>
    <tbody>
        <tr>
            <th>Option 1</th>
            <th>Option 2</th>
            <th>Option 3</th>
        </tr>
<?php   
    while ($row = mysqli_fetch_assoc($result)) {
?>  
    <tr>
        <td id="triggerTooltip"><?php echo $row['option1']; ?>
            <div class="tooltip">
                <p>Extra info</p>
            </div>
        </td>                   
        <td><?php echo $row['option2']; ?></td>
        <td><?php echo $row['option3']; ?></td>
    </tr>
<?php
    }
?>
    </tbody>
</table>

---

我试着使用

$（this）.find（'.tooltip'）

，它可以工作，但只适用于第一次出现的

#triggerTooltip

。我想我弄错了。你能帮我弄清楚吗？谢谢。

您似乎在复制（或使用）ID。不要复制ID！改用类名

$('.triggerTooltip').mouseenter(function() {
     $(this).find('.tooltip').show();  
}).mouseleave(function() {
     $(this).find('.tooltip').hide();
});

HTML

额外信息

尝试使用，它将两个函数作为参数，记住类和ID是不同的。ID在页面上是唯一的。

上面的答案在这里是正确的，如果您愿意，也可以使用CSS实现此行为，规则如下：

.triggerTooltip .tooltip {
    display: none;
}

.triggerTooltip:hover .tooltip {
    display: block;
}

您可以使用：

$('#triggerTooltip').mouseenter(function() {
    $(this).find('.tooltip').each(function() {$(this).show()});
}).mouseleave(function() {
    $(this).find('.tooltip').each(function() {$(this).hide()});
});

---

另外，

$（this）.最近（'.tooltip'）

和

$（this）.查找（'.tooltip'）

是两件完全不同的事情。第一个向上看。第二个向下看，谢谢！这是一个很好的方法，我会记住它以备将来使用。它真的帮助我不依赖JS。简单明了。

.triggerTooltip .tooltip {
    display: none;
}

.triggerTooltip:hover .tooltip {
    display: block;
}

$('#triggerTooltip').mouseenter(function() {
    $(this).find('.tooltip').each(function() {$(this).show()});
}).mouseleave(function() {
    $(this).find('.tooltip').each(function() {$(this).hide()});
});