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()メソッドを使用して、クリックした次の兄弟要素を取得します次へボタン。

$('.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

次のボタンを1つだけ保持でき、以下のようなセクションを非表示にすることができます。

$('.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); 
});