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/

或者如果你想在fadeOut之后让文章细节的fadeIn发生，你需要创建一个保存实际点击元素的变量，如下所示：

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

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

只选择下一个兄弟姐妹

1 个答案: