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

您只能保留一个下一个按钮，并且可以隐藏以下部分。

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

在JQuery中选择下一个非匹配元素

4 个答案: