jQuery show/addClass 对于许多具有相同类的 div

Question

所以我想做的是：

HTML 代码：

<div class="div_with_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue 
lectus sed tortor placerat quis porttitor dui vehicula. Morbi molestie 
tortor sit amet eros tempor consectetur.
</div>
<div class="show_more_btn">Show more</div>

<div class="div_with_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue 
lectus sed tortor placerat quis porttitor dui vehicula. Morbi molestie 
tortor sit amet eros tempor consectetur.
</div>
<div class="show_more_btn">Show more</div>

<div class="div_with_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue 
lectus sed tortor placerat quis porttitor dui vehicula. Morbi molestie 
tortor sit amet eros tempor consectetur.
</div>
<div class="show_more_btn">Show more</div>

CSS 代码：

.showMore
{
    display:block;
}
.div_with_content
{
    display:none;
}

所以我有很多带有“div_with_content”类的 div（不显示），其中包含一些内容，通常是文本。每个“div_with_content”下方都有一个包含在 div“show_more_btn”中的按钮。因此，当我按下 div show_more_btn 时，将会添加 showMore 类的样式（通过 jQuery 中的 addClass）来缓慢显示该 div。所以它很容易实现：

JS 代码：

$(function() {
        $(".show_more_btn").click(function(event){
               $(".div_with_content").addClass("showMore").show(1500,"swing");
     });
    });

但只有一个问题：当我按下任一 show_more_btn 时，所有 div_with_content 都会慢慢显示，而不仅仅是 show_more_btn 上的一个。所以我想要的是：当我按“show_more_btn”时，只会显示“show_more_btn”上的“div_with_content”，而其他“div_with_content”仍然不可见。我该如何实现这一目标？

Answer 1

您只需要修复您的 JavaScript 代码，使其仅适用于您想要的 div_with_content，而不是全部。试试这个：

$(function() {
        $(".show_more_btn").click(function(event){
               $(this).prev(".div_with_content").addClass("showMore").show(1500,"swing");
     });
    });

Answer 2

http://api.jquery.com/prev/

您正在寻找 prev() 方法jquery。它也将采用一个选择器，并且只会选择单击的类之前的类。

 $(".show_more_btn").click(function(event){
               $(".show_more_btn").prev(".div_with_content").addClass("showMore").show(1500,"swing");

沿着这些思路的东西。

Answer 3

您可以使用 prev http://api.jquery.com/prev/

$(function() {
     $(".show_more_btn").click(function(event){
               $(this).prev(".div_with_content").addClass("showMore").show(1500,"swing");
     });
});