在 jquery 中进行操作以特定 div 为目标答案

【问题标题】：Making an action in jquery target a specific div在 jquery 中进行操作以特定 div 为目标
【发布时间】：2014-02-22 23:34:31
【问题描述】：

我正在我的网站上工作，我正在尝试做一个博客部分。我的 html 中有两个 div 位于父 div 中。两个 div 共享相同的类选择器。我正在使用 jquery 将文本隐藏在其中，直到悬停在上面。但是，由于当您将鼠标悬停在一个 div 上时它们具有相同的类选择器，所以它会在两个 div 中显示文本。如何将它们保持在同一个类中，但只显示当前悬停在 div 中的文本？

HTML：

<div class="mythoughts">
    <div class="date">15FEB2014</div>
    <div class="entry">
        <p class="vis">Blah ...</p>
    </div>
</div>
<div class="mythoughts">
    <div class="date">16FEB2014</div>
    <div class="entry">
        <p class="div">Blah ...</p>
    </div>
</div>

jQuery:

$('.mythoughts').mouseenter(function () {
    $('.entry').show();
});

$('.mythoughts').mouseleave(function () {
    $('.entry').hide();
});

【问题讨论】：

请在您的问题中发布相关代码。

标签： javascript jquery html

【解决方案1】：

您可以使用this（指当前项）来获取正确的元素。

更改此代码：

$('.mythoughts').mouseenter(function() {
    $('.entry').show();  // shows ALL .entry elements (not desired)
});

到

$('.mythoughts').mouseenter(function() {
    $(this).find('.entry').show();  // shows .entry within the hovered .mythoughts
});

您的代码：http://jsfiddle.net/29VkS/

更新代码：http://jsfiddle.net/29VkS/1/

【讨论】：

这太完美了！我一直在自学，由于某种原因无法弄清楚这一点。如果我有更多的声誉，我会投票...非常感谢！
乐于助人。虽然您无法投票，但请务必点击最有帮助的答案旁边的复选框以接受该答案作为您问题的解决方案。

【解决方案2】：

“但是由于它们具有相同的类选择器，因此当您将鼠标悬停在一个 div 上时，它会在两个 div 中显示文本。”

为什么不区分不同 ID 的 div？

<div class="sameclass" id="firstdiv"></div>
<div class="sameclass" id="seconddiv"></div>

例如。

【讨论】：

【解决方案3】：

您可以为 div 使用 id

<div id="unique_id" class="the_same_class">...</div>

jquery可以调用id

【讨论】：