Question

我希望能够显示/隐藏特定文本（使用jqery）。问题是我将有多个版本的此文本标签具有相同的ID，并且我希望能够在您将鼠标悬停在父项上时对特定子项执行动画，而不是对所有文本执行动画具有相同身份的块。

这是我的代码：

HTML：

<p>Move your cursor over the posts below to read more.</p>
<div id="postContainer">
    <div id="post">
        <h4>Title 1</h4>
        <h5>Date goes here</h5>
        <p id="postDetails">Blah Blah Blah, this text is hidden until you hover over it's own parent.</p>
    </div>
</div>
<div id="postContainer">
    <div id="post">
        <h4>title 2</h4>
        <h5>Date goes here</h5>
        <p id="postDetails">This is the second hidden text, but it is revealed when you hover over the first post as well.</p>
    </div>
</div>

CSS：

#post
{
    background:#DDDDDD;
}
#postDetails
{
    display"none;
}

Jquery的：

<script>
    $('#post').mouseenter(function() {
      $('#postDetails').slideDown("slow");
    });
    $('#post').mouseleave(function() {
      $('#postDetails').slideUp("slow");
    });
</script>

有没有办法只显示一个没有创建一堆不同的div id，每个不同的名称？有20个盒子都是这样的（它们看起来都应该相同）而且我希望能够一次只显示一个，当用户将鼠标悬停在随后的盒子上时，因为同时显示所有20个扩展页面长度并使用户烦恼。

Answer 1

如果你有多个元素，那么使用class而不是使用id。

请看jsfiddle。我改变了一些标记。

<强>样本

http://jsfiddle.net/saorabhkr/xtrpK/1/

Answer 2

这是工作演示

http://jsfiddle.net/CLgYB/

说明：

你需要使用它...

HTML CODE

<p>Move your cursor over the posts below to read more.</p>
<div class="postContainer">
    <div class="post">
        <h4>Title 1</h4>
        <h5>Date goes here</h5>
        <p class="postDetails">Blah Blah Blah, this text is hidden until you hover over it's own parent.</p>
    </div>
</div>
<div class="postContainer">
    <div class="post">
        <h4>title 2</h4>
        <h5>Date goes here</h5>
        <p class="postDetails">This is the second hidden text, but it is revealed when you hover over the first post as well.</p>
    </div>
</div>

jQuery脚本

$

('.post').mouseenter(function() {
      $(this).children('.postDetails').slideDown("slow");
    });
    $('.post').mouseleave(function() {
     $(this).children('.postDetails').slideUp("slow");
    });

Answer 3

您需要使用类而不是ID。 ID应仅用于唯一元素。您可以遍历所有帖子并将mouseenter和mouseleave事件添加到每个帖子。使用此引用来定位单个帖子和postDetails，如此

$('.post').each(function(){
    $(this).mouseenter(function() {
      $(this).children('.postDetails').slideDown("slow");
    }).mouseleave(function() {
      $(this).children('.postDetails').slideUp("slow");
    });
});

我在这里整理了一个jsfiddle示例http://jsfiddle.net/pimlinders/b2ASK/

Answer 4

$('#post').mouseenter(function() {


// while in here, the particular $('#post') which has been entered can be accessed as $(this)



     $(this).find('#postDetails').slideDown("slow");
});

...但你真的应该使用不同的div id。这就是为什么他们称之为ids。

在所选文本上执行动画

4 个答案: