Выбираем только следующего родного брата

Question

Я читал несколько решений на этой доске и на других для выбора следующего родного брата, но у меня всегда есть какая-то проблема при использовании предлагаемого кода.

что у меня есть это

<div class="article" id="onea">
         <h1>test2</h1>
         <p class="subtitle">ccccc</p>
         <p class="number">1a</p>
         </div>


         <p class="detail">ddddd</p>


<div class="article" id="oneb">
         <h1>test2</h1>
         <p class="subtitle">ccccc</p>
         <p class="number">1a</p>
         </div>


         <p class="detail">ddddd</p>

и что я хочу, так это то, что если я щелкаю по div.article, статьи исчезают, а следующий p.detail исчезает.

я попробовал это с этим

$('div.article').click(function() {
         $('div.article').fadeOut(450, function(){
         $(this).next('p.detail').fadeIn(750)
        });     

});

но он всегда исчезает во всех p.details, а не только точно следующий p.detail

Answer 1

Не помещайте ваш fadeIn в обратный вызов в вашем fadeOut. Затем $ (this) будет ссылаться на все div.article и поэтому исчезнет во всех деталях.

$('div.article').click(function() {
     $('div.article').fadeOut(450);
     $(this).next('p.detail').fadeIn(750);
});

Рабочий пример: http://jsfiddle.net/24GpH/

Или, если вы хотите, чтобы fadeIn подробностей статьи происходил после fadeOut, вам нужно создать переменную, которая будет содержать фактически нажатый элемент следующим образом:

$('div.article').click(function() {
    clicked_div = $(this);
    $('div.article').fadeOut(450, function() {
        clicked_div.next('p.detail').fadeIn(750);
    });
});

Рабочий пример: http://jsfiddle.net/24GpH/1/