Javascript 如何根据索引号在DOM中显示或隐藏HTML元素

我正在做一个测验，他们有六个问题（没有正确或错误的答案）

除了第一个问题外，这些问题都隐藏在HTML中。测验底部有一个“下一步”按钮。当人们回答每个问题后单击“下一步”时，我希望它找到可见的问题，隐藏它，然后显示下一个问题

我做这件事有困难。我知道我可以隐藏所有元素或显示所有元素，但我只想显示下一个隐藏的问题。例如，在页面加载时，问题1是可见的。当用户单击“下一步”时，问题1应隐藏，问题2应显示。剩下的问题应该隐藏起来。再次单击“下一步”按钮时，问题2将隐藏，问题3将可见，依此类推。我似乎无法理解这一点。我尝试使用jquery的每个函数，并以某种方式通过索引来定位问题，但没有成功

这是我的JS小提琴：

HTML:

}像这样：

var pos = 0;
$(".next").click(function () {
    pos++
    $(".question").hide();
    $(".question").eq(pos).show();

});

---

您还需要在问题包装中添加问题标题“第1个问题，共5个问题”。

您需要删除循环，这使得它可以多次执行，您所需要做的就是获取对问题的引用，使其可见并隐藏，然后使用next（）获取对下一个问题的引用

或者，您可以添加“hide”类，而不是使用hide（）

---

您似乎不太清楚jquery的每个部分都在做什么。尝试制作一个更简单的html示例，并在那里使用jquery。（请记住：您正在尝试学习如何编写代码，而不仅仅是为了得到“正确”的答案）。另一种方法：这些数据来自某个地方，因此请将其放入JS中，并由此生成DOM，而不是将其硬编码到HTML中。然后你还可以直接引用“下一步”需要切换的东西。这正是我想要的。我想按索引编号来参考这些问题，但我不知道怎么做。谢谢

.hide {
display:none;

var pos = 0;
$(".next").click(function () {
    pos++
    $(".question").hide();
    $(".question").eq(pos).show();

});

$(".next").click(function () {       
    $(".question:visible").hide().next(".question").removeClass("hide");
});

$(".question:visible").addClass('hide').next(".question").removeClass("hide");