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。我按下按钮-> 2nd div 加载，1st div 隐藏。我再按一次按钮-> 2nd div 隐藏，3rd div 出现。

这是我尝试的方法：

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

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

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

score 6 · Accepted Answer

您可以简单地查找第一个 visible 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>

score 4 · Accepted Answer

尝试

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

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

演示：小提琴

score 0 · Accepted Answer

在决定单击按钮时要做什么之前，您需要检查哪些问题是可见的。

<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>

score 0 · Accepted Answer

你能试试这个

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

score 0 · Accepted Answer

    <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。您可以添加最大计数器并添加代码以在结束时停止处理。

score 0 · Accepted Answer

也许是这样的：

编辑：添加了 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% 完整或正确，但你明白了……

javascript - jQuery隐藏和显示多个div

6 回答 6

Related

Reference