Wählen Sie das nächste nicht übereinstimmende Element in JQuery

Question

Zu Beginn sind alle .show-this Abschnitte ausgeblendet, mit Ausnahme der ersten.

Wenn dann ein .btn-next geklickt wird, sollte der vorhergehenden .show-this Abschnitt wechseln die Klasse .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

Dies tun sollte

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

Answer 2

Verwenden Sie next() Methode, um das folgende Geschwisterelement von geklickt Nächste Schaltfläche zu erhalten.

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

könnten Sie versuchen, den Code-Schnipsel ausführen, um die Lösung zu testen.

Answer 3

Sie können nur eine nächste Schaltfläche beibehalten und die folgenden Abschnitte ausblenden.

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

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

Answer 4

Wenn Sie den vorhergehenden .show-this Block zeigen wollen, müssen Sie prev() verwenden. Es wird das vorhergehende Geschwister zurückgeben.

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

Schauen Sie sich diese plunkr