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。我按下按钮 - ＆gt;第二个div加载，第一个div隐藏。我再次按下按钮 - ＆gt;第二个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>

Answer 2

尝试

$('div[id^="question"]').hide().first().show();

$("#next").click(function (e) {
    event.preventDefault();
    $('div[id^="question"]:visible').hide().next().show();
});

演示：Fiddle

Answer 3

可能是这样的：

编辑：添加了jsfiddle演示： http://jsfiddle.net/KPjUc/

 var currentQuestion = 1; 

 $("#next").click(function (e) {
       //hide all div's start with "question"
        $("div[id^=question]").hide();

       //Show div related to current question number
        $('#question' + currentQuestion++).show();
       //When last question is reached, move back to first question
          if(currentQuestion >3){
               currentQuestion =1;
         }
    });

也许不是100％完整或正确，但你明白了......

Answer 4

你能试试吗

http://jsfiddle.net/2dJAN/7/

<div id="question1">
question1
</div>
<div id="question2">
question2
</div>
<div id="question3">
question3
</div>
<button id="next">Next question</button>

$('#question2').hide();
$('#question3').hide();

    $("#next").click(function (e) {
        event.preventDefault();
        $('#question1').hide();
        $('#question2').show();
        $(this).on("click",function(){
        $('#question2').hide();
        $('#question3').show();
      });  
    });

Answer 5

在决定单击按钮时要执行的操作之前，您需要检查问题是否可见。

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

    $("#next").click(function (e) {
        event.preventDefault();
        if ($('#question1').is(':visible')) {
                $('#question1').hide();
                $('#question2').show();
        } else if ($('#question2').is(':visible')) {
                $('#question2').hide();
                $('#question3').show();
                .html('Save');
        } else if ($('#question3').is(':visible')) {
                 //Submit
        }
    });
</script>

Answer 6

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

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

    <div id="question3" class="question">
    question3
    </div>......



$("#next").click(function (e) {
    $('.question').hide();
    var current_q_id = $(this).attr('id');
    // question counter 
    var current_no = current_q_id.replace("question", ""); // 1 , 2 ,3 
    var next_no = parseInt(current_no) + 1;
    // generate next div id 
    var next_div_id = '#question'+next_no;

    // show next div
    $(next_div_id).show();
});

这将适用于更多的3 div。您可以添加最大计数器并添加代码以在结束时停止处理。

jQuery隐藏并显示多个div

6 个答案: