jQuery show/addClass для многих div с одним и тем же классом

Итак, что я пытаюсь сделать:

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


jquery show addclass
person born2fr4g    schedule 06.09.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

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

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

arrow_upward
1
arrow_downward

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");

что-то в этом духе.

person Kobby A    schedule 06.09.2011
comment
Большое спасибо :). Это то, что я хотел. У меня есть еще один вопрос: теперь, когда он работает, как добавить эту функциональность: когда отображается div_with_content и когда я нажимаю show_more_btn еще раз, он будет HIDE pres div_with_content ? - person born2fr4g; 07.09.2011

arrow_upward
0
arrow_downward

Вы можете использовать prev http://api.jquery.com/prev/

$(function() {
     $(".show_more_btn").click(function(event){
               $(this).prev(".div_with_content").addClass("showMore").show(1500,"swing");
     });
});
person James Montagne    schedule 06.09.2011
comment
Большое спасибо :). Это то, что я хотел. У меня есть еще один вопрос: теперь, когда он работает, как добавить эту функциональность: когда отображается div_with_content и когда я нажимаю show_more_btn еще раз, он будет HIDE pres div_with_content ? - person born2fr4g; 07.09.2011