選擇唯一的下一個兄弟

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/

或者，如果你想讓文章細節的淡入發生後淡出，你需要創建持有實際點擊的元素像這樣的變量：

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

工作示例：http://jsfiddle.net/24GpH/1/