javascript - jQuery 隐藏和显示多个 div

Question

我有一个包含 3 个问题的 html 表单，每个问题都在一个 div 中:

<div id="question1">
question1
</div>

<div id="question2">
question2
</div>

<div id="question3">
question3
</div>

最后还有一个按钮:

<button id="next">Next question</button>

我想要的 - 首先只显示第一个 div。我按下按钮 -> 第二个 div 加载，第一个 div 隐藏。我再按一次按钮 -> 第二个 div 隐藏，第三个 div 出现。

以下是我的尝试:

<script>
$('#question2').hide();
$('#question3').hide();

    $("#next").click(function (e) {
        event.preventDefault();
        $('#question1').hide();
        $('#question2').show();
    });
</script>

我不知道如何加载第 3 个 div。

Answer 1

您可以简单地查找第一个可见的 div，然后隐藏它，随后显示下一个 div:

var next;
$("#advance").on("click", function () {
    next = $("#steps div:visible:first").hide().next();
    next.length ? next.show() : alert( "No more divs" );
});

我提出了一个小建议；将您的 div 嵌套到一个公共(public)容器中:

<button id="advance">Advance</button>
<div id="steps">
    <div id="question1">question1</div>
    <div id="question2">question2</div>
    <div id="question3">question3</div>
</div>