如何使用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>

如何選擇下一個隱藏的.next-div元素並顯示它，然后選擇上一個隱藏的元素並使用jQuery顯示它？

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
});

工作演示