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

我提出了一个小建议; 将您divs嵌入到一个公共容器中:

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