javascript/jquery通过divs循环，并使用click事件添加next/prev按钮 这是第一步 这是第二步 这是第三步 这是第4步 上 下一个

我知道如何循环遍历div并获得每个div，这没什么大不了的，但我看不出如何循环遍历div并仅显示第一个div，然后单击next show the second，依此类推（上一个也一样）

无论是vanilla JS还是jQuery解决方案都可以作为解决方案，但我真正想要的是，你们中的任何人能否向我解释它背后的确切逻辑，因为我真的看不到它

我可以发布一些我已经完成的代码，但这不是问题所在，而是如何编程逻辑

---

非常感谢

使用

：visible

查找当前显示的DIV，并使用

.next（）

和

.prev（）

前进和后退

$（“#nextBtn”）。单击（函数（）{
var nextDiv=$（“.step:visible”）.next（“.step”）；
如果（nextDiv.length==0）{//环绕到开头
nextDiv=$（“.step:first”）；
}
$（“.step”）.hide（）；
nextDiv.show（）；
});
$（“#prevBtn”）。单击（函数（）{
var prevDiv=$（“.step:可见”）.prev（“.step”）；
如果（prevDiv.length==0）{//环绕结束
prevDiv=$（“.step:last”）；
}
$（“.step”）.hide（）；
prevDiv.show（）；
});
。步骤{
显示：无；
}
第一个孩子{
显示：块；
}

这是第一步
这是第二步
这是第三步
这是第4步
上
下一个
这就是我如何尝试使用一些有用的方法来解决这个问题的方法，比如，和+结合CSS
active
类来显示当前块


var$steps=$（'.step'）；
$（'#nextBtn'）。单击（函数（）{
var$next=$steps.filter（'.active'）.removeClass（'active'）.next（'.step'）；
if（！$next.length）$next=$steps.first（）；
$next.addClass（'active'）；
});
$（'#prevBtn'）。单击（函数（）{
var$prev=$steps.filter（'.active'）.removeClass（'active'）.prev（'.step'）；
如果（！$prev.length）$prev=$steps.last（）；
$prev.addClass（“活动”）；
});
。步骤{
边缘底部：10px；
填充：10px；
背景：DDD；
显示：无；
}
.step.active{
显示：块；
}

这是第一步
这是第二步
这是第三步
这是第4步
上
下一个
我曾尝试使用基于索引的代码。试试看

<div class="form">
   <div class="step">This is step 1</div>
   <div class="step">This is step 2</div>
   <div class="step">This is step 3</div>
   <div class="step">This is step 4</div>

   <button id="prevBtn">Prev</button>
   <button id="nextBtn">Next</button>
</div>

你们为什么不投这个票？？stackoverflow不也是一种征求意见/解决方案的方式吗？？我将粘贴到我迄今为止所做的所有代码，这会让你停止向下投票吗？？你们都是天生的专家吗？你们想展示什么？你能解释一下你想要完成什么吗？您想使用jquery之类的工具来帮助显示和隐藏div吗？手风琴工具可以用来显示和隐藏div，您可以添加一个按钮来打开每个div。我认为这个问题需要更多的解释。@Aaron我明白你的意思，我没有分享代码的原因是我没有寻找实际的代码，而是寻找它背后的逻辑来理解它并自己构建它，这是我在这些答案之后仍然缺少的，因为我在其他主题上也找到了类似的答案，但不是解释的逻辑，而是
$（'.step:eq（'+index+'））.hide（）
我建议只使用
$（'.step'）.hide（）。此外，您可以避免使用
$（'.step'）.eq（index）
$（'.step'）.hide（）构建选择器；将调用所有div，但当我们使用$（'.step'）.eq（index）时，如果它是错误的，它将调用特定的索引。你能解释一下什么是错误的吗？不，是的<代码>$（'.step'）.hide（）将隐藏所有代码。这应该具有与
$（'.step'）.eq（index.hide（）相同的性能，但不要引用我的话。它还有一个额外的好处，就是确保一次只显示一个（以防引入任何bug）。我接受了@Barmar solution，因为他首先回答了问题，非常感谢所有的答案，伙计们，你知道你如何在帖子中添加代码片段吗@Aaron是SO编辑器工具栏中左侧的第七个工具。该图标看起来像一个包含
的文档。
       var index = 0;
    $(function () {
        $('.step:not(:first)').hide();
        $('#nextBtn').click(function () {
            if (($('.step').length - 1) >= index) {
                $('.step:eq(' + index + ')').hide();
                index++;
                $('.step:eq(' + index + ')').show();
            }
        });
        $('#prevBtn').click(function () {
            if (index != 0) {
                $('.step:eq(' + index + ')').hide();
                index--;
                $('.step:eq(' + index + ')').show();
            }
        });
    });