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

工作演示