选择唯一的下一个兄弟

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/