Question

我正在我的网站上工作，我正在尝试做一个博客部分。在我的html中，我有两个div在父div中休息。两个div共享相同的类选择器。我正在使用jquery隐藏它们内部的文本，直到它翻过来。但是，当你将鼠标悬停在一个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();
});

Answer 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/

Answer 2

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

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

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

例如。

Answer 3

你可以使用div的id

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

id可以由Jquery

调用

在jquery中执行操作目标是一个特定的div

3 个答案: