在JQuery中選擇下一個不匹配的元素

Question

開始時，除第一個外，所有.show-this部分都是隱藏的。

然後，當單擊.btn-next時，前述.show-this部應觸發類.visible

HTML

<section class="show-this"> 
    ... 
</section> 

<button class="btn-next">Next</button> 

<section class="show-this"> 
    ... 
</section> 

<button class="btn-next">Next</button> 

<section class="show-this"> 
    ... 
</section> 

JQuery的

$('.btn-next').click(function(){ 
    $(this).closest('.show-this').toggleClass('visible'); // doesn't work 
    $(this).prop('disabled', true); 
}); 

Answer 1

這應該做

$('.btn-next').click(function(){ 
$(this).next().toggleClass('visible'); 
$(this).prop('disabled', true); 
}); 

Answer 2

使用next()方法得到下面的點擊的同級元素Next Next button。

$('.btn-next').click(function(){ 
 
    $(this).next('.show-this').toggleClass('visible').next('.btn-next').toggleClass('visible'); 
 
    $(this).prop('disabled', true); 
 
});

.show-this:not(:first-of-type), 
 
.btn-next:not(:first-of-type) { 
 
    visibility:collapse; 
 
} 
 
.show-this.visible, 
 
.btn-next.visible 
 
{ 
 
    visibility:visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="show-this"> 
 
    ... 
 
</section> 
 

 
<button class="btn-next">Next</button> 
 

 
<section class="show-this"> 
 
    ... 
 
</section> 
 

 
<button class="btn-next">Next</button> 
 

 
<section class="show-this"> 
 
    ... 
 
</section>

你可以嘗試運行的代碼片段測試解決方案。

Answer 3

您只能保留一個下一個按鈕，並且可以隱藏下面的部分。

$('.show-this:not(:first)').hide(); 

var current = 0; 
$('.btn-next').click(function(){ 
    current++; 
    $('.show-this').hide(); 
    $(".show-this:eq("+current+")").show(); 
}); 

Answer 4

如果你想顯示前.show-this塊，你必須使用prev()。它會返回前面的兄弟姐妹。

$('.btn-next').click(function(event){ 
    $(this).prev().toggleClass('visible'); 
    $(this).prop('disabled', true); 
}); 

看看這個plunkr