javascript - jquery 仅显示下一个具有相同类的 div

Question

我正在尝试使用 jquery 执行一系列步骤，但未能达到我想要的结果。

我有 3 个步骤，其中有一个 .wiki-step- 类加上一个数字。 我的 JavaScript 是这个:

function stepping() {
    var stepButton = $("a.button");
    var step = $("[class*='wiki-step-']");
    stepButton.closest(step).hide().next(step).show();
}

$("a.button").on("click",function(){
    stepping();
});

它只需要 2 个步骤就可以正常工作，但我注意到，如果我添加第三个步骤，jquery (next) 会立即显示所有其他步骤，但我只想显示下一个div 排成一行，但不是全部。

这是一个 fiddle :https://jsfiddle.net/vsomcag2/1/ 您可以看到它如何同时显示第二步和第三步。

我想我不能使用nextUntil()，我想我应该使用某种计数器，但我不知道从哪里开始。我想避免指定数字，因为我希望能够在不编辑 js 的情况下添加或删除步骤。

非常感谢任何帮助。

    function stepping() {
        var stepButton = $("a.button");
        var step = $("[class*='wiki-step-']");
        stepButton.closest(step).hide().next(step).show();
    }

    $("a.button").on("click",function(){
        stepping();
    });

div[class*="wiki-step-"] {
        display: none;
       width: 500px;
       height: 500px;
       border:1px solid red;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="wiki-step-1" style="display:block">
<h1>step 1</h1>
<a href="#" class="button">next</a>
</div>

<div class="wiki-step-2">
  <h1>step 2</h1>
<a href="#" class="button">next</a>
</div>

<div class="wiki-step-3">
  <h1>step 3</h1>
</div>

Answer 1

您需要获取对clicked对象a的引用，并根据该对象show hide。

function stepping(obj) {
  var stepButton = $(obj);
  var step = $("[class*='wiki-step-']");
  stepButton.closest(step).hide().next(step).show();
}

$("a.button").on("click", function () {
   stepping(this);
});

Here是jsfiddle