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

我试图用jquery执行一系列步骤，但没有达到我想要的结果

我有3个步骤，一个.wiki步骤类加上一个数字。 我的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();
});

它只需要两个步骤就可以正常工作，但我注意到，如果我添加第三个步骤，jquery下一步将同时显示所有其他步骤，但我只想显示行中的下一个div，而不是所有步骤

这是一把小提琴： 您可以看到它如何同时显示第二步和第三步

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

非常感谢您的帮助

函数步进{ var stepButton=$a.button； var step=$[class*='wiki-step-']； stepButton.closeststep.hide.nextstep.show； } $a.button.onclick，函数{ 步进； }; div[class*=wiki步骤-]{ 显示：无； 宽度：500px； 高度：500px； 边框：1px纯红； } 第一步 步骤2 步骤3

---

您需要获取对单击对象的引用，并根据该对象显示隐藏

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

---

is JSFIDLE

可能非常简单：

$("a.button").on("click",function(){
        $(this).parent().hide();
        $(this).parent().next().show();
    });

---

演示：

如果您希望一次只显示一个，可以使用以下选项：

函数步进元素{ var step=$[class*='wiki-step-']； elem.closeststep.hide.nextstep.show.nextstep.hide； } $a.button.onclick，函数{ 这个,； }; div[class*=wiki步骤-]{ 显示：无； 宽度：500px； 高度：500px； 边框：1px纯红； } 第一步 步骤2 步骤3 请尝试以下代码：

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

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

---

首先，获取当前步骤，该步骤可见，然后检查该步骤之后是否有步骤，然后显示该步骤是否存在，并隐藏当前步骤

函数步进{ //var stepButton=$a.button； var currentStep=$[class^='wiki-step-']：可见； var nextStep=$currentStep.next[class^='wiki-step-']； ifnextStep.length>0{ 当前步骤。隐藏； nextStep.show； } //var step=$[class*='wiki-step-']； //stepButton.closeststep.hide.nextstep.show； } $a.button.onclick，函数{ 步进； }; div[class*=wiki步骤-]{ 显示：无； 宽度：500px； 高度：500px； 边框：1px纯红； } 第一步 步骤2 步骤3

---

我稍微修改了你的HTML和CSS，因为我相信数据属性对这类东西很有效

我还使用了蛮力，隐藏所有内容，然后显示您需要的页面。我经常发现这种方法会导致更少的错误，就像视图变成状态时React是如何工作的一样。因此，要使其具有优先阶段，只需很少的修改

函数步进{ var nextStep=$this.closest'[data step]'。 属性“数据步进”| 0+1； $'[data step]'.addClass'hidden'； $'[data step='+nextStep+']'.removeClass'hidden'； } $a.button.onclick，步进； [数据步]{ 宽度：500px； 高度：500px； 边框：1px纯红； } .隐藏{ 显示：无； } 第一步 步骤2 步骤3