JQuery скрыть и показать несколько дивы

Question

Я получил форму HTML с 3 вопроса, каждый вопрос внутри DIV:

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

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

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

и кнопки в самом конце:

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

Что я хочу - сначала показан первый div. Я нажимаю кнопку -> 2-го div-нагрузки, 1-й div-шкур. Я нажимаю кнопку еще раз -> 2-й div скрывается, появляется третий div.

Вот как я попробовал:

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

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

Я не знаю, как загрузить 3-й DIV.

Answer 1

Попробуйте

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

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

Демо: Fiddle

Answer 2

Вы можете просто искать первый видимый 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 3

Может быть что-то вроде:

EDIT: Добавлена ​​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

Вы должны проверить Wich вопрос виден, прежде чем решить, что делать, когда нажимается кнопка.

<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 дел. вы можете добавить max counter и добавить код, чтобы остановить обработку, когда достигнут конец.