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 с классом "div_with_content" (ведьма не отображается) с некоторым содержимым, обычно с текстом. Под каждым "div_with_content" есть кнопка, заключенная в div "show_more_btn". Поэтому, когда я нажимаю на div show_more_btn, будет добавлен стиль (Trought AddClass в jQuery) класса showMore, чтобы медленно показать этот div. Так что его легко достичь:

JS CODE:

$(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», только «div_with_content» точно над «show_more_btn» будет показано, другие «div_with_content» все еще не видны. Как мне этого добиться?

Answer 1

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 2

Вам просто нужно исправить свой код JavaScript, чтобы он применялся только к div_with_content, который вы хотите, а не ко всем. Попробуйте это:

$(function() {
        $(".show_more_btn").click(function(event){
               $(this).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");
     });
});