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 だけです。ボタンを押します -> 2 番目の div が読み込まれ、1 番目の div が非表示になります。もう一度ボタンを押す -> 2 番目の div が非表示になり、3 番目の 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();
});

デモ:フィドル

Answer 2

たぶん次のようなものです：

編集: 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 3

これを試すことができますか

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