jquery - jQuery：快速说关闭这个，打开那个？

Question

我有一系列 div，包含以下类：dots-1、dots-2、dots-3、dots-4 打开页面时只有“.dots-1”可见；其他 3 个 div 被隐藏。您必须单击每个 div 上的按钮才能显示下一个 div - 即在点 1 上，单击按钮 1，它会关闭点 1 并打开点 2。在dots-2 上，单击button-2，它关闭dots-2 并打开dots-3。

<div class="dots-1">
    Text 1
    <a class="button-1">Go to 2</a>
</div>

<div class="dots-2">
    Text 2
    <a class="button-1">Go to 3</a>
</div>

<div class="dots-3">
    Text 3
    <a class="button-1">Go to 4</a>
</div>

<div class="dots-4">
    Text 4
    <a class="button-1">End</a>
</div>

<style>
    .dots-2, .dots-3, .dots-4{display:none;}
</style>

是否有一种快速、紧凑的方法来编写关闭每个 div 并在单击每个按钮时打开下一个 div 的 jQuery 代码？

否则，我会写出很长的 jQuery 代码：单击按钮 1 时，关闭点 1 并打开点 2。单击按钮 2 时，关闭点 2 并打开点 3。

谢谢！

Answer 1

尝试这个：

$( "a[class^='button']" ).click(function () {
     $(this).parent().hide();
    $(this).parent().next().show();
});

您还可以检查jsFiddle