jquery - 对选定文本执行动画

Question

我希望能够显示/隐藏特定文本（使用 jqery）。问题是我将拥有多个具有相同 id 的文本标签版本，并且我希望能够在将鼠标悬停在父对象上时对特定子对象执行动画，而不是对所有文本执行动画具有相同 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;
}

查询：

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

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

Answer 1

如果您有多个元素，则使用 id 的使用类。

请参阅jsfiddle。我更改了一些标记。

演示

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

Answer 2

这是工作演示

http://jsfiddle.net/CLgYB/

解释：

你需要为它使用类..

代码

<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 事件。使用 this 引用来定位单个帖子和 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/ ​</p>

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。