javascript - 如何使用 jQuery 在按钮单击时显示下一个 div？

Question

以下是我的元素。

<div class="first-div">
   DIV 1
   <button class="next">Next</button>
</div>
<div class="next-div" style="display:none;">
   DIV 2
   <button class="back">Back</button>
   <button class="next">Next</button>
</div>
<div class="next-div" style="display:none;">
   DIV 3
   <button class="back">Back</button>
   <button class="next">Next</button>
</div>
<div class="next-div" style="display:none;">
   DIV 4
   <button class="back">Back</button>
</div>

如何使用 jQuery 选择下一个隐藏的 .next-div 元素并显示它，并选择上一个隐藏元素并显示它？

Answer 1

您可以使用:

$('.next').click(function(){
   $(this).parent().hide().next().show();//hide parent and show next
});

$('.back').click(function(){
   $(this).parent().hide().prev().show();//hide parent and show previous
});

<强> Working Demo