1

クイズを表示するASP.NETアプリケーションを作成しています。このクイズは、質問ごとに表示するユーザーに表示する必要があります。

つまり、最初の質問が表示され、彼が次のボタンを押すと、現在の質問要素を非表示にして、表示する要素がなくなるまで次の質問要素を表示します。

今のところ、MVC4でそれらすべてを表示することができました。JQueryの使用経験はあまりありません。

<div id="questions-container">
    <div class="question">
     ...
    </div>
    <div class="question">
     ...
    </div>
    <div class="question">
     ...
    </div>
    <div class="question">
     ...
    </div>  
</div>

この機能をどのように実装できるかについて説明していただけますか？ありがとう

4

2 に答える 2

3

デフォルトですべての質問をに設定display: none;し、ページが読み込まれたときに最初の質問を表示します（または、.question.firstを持っている別のクラスを使用するdisplay: block;と、次のボタンで次の質問を表示できます。

$("#questions-container").find(":visible").hide().next().show();
于 2013-01-17T19:16:33.887 に答える
1

私はあなたがすでにこれに対する答えを持っていることを知っています。私は自分のサイトの1つでこれに非常に近いことをしています。これにより、divがカウントされ、最後のdivに到達するまで次のボタンが表示され、最後のdivに到達するとボタンが削除されます。上記のコードを含めるように書き直しました。

    <!DOCTYPE html>
<html lang="en">
  <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
    { 
    var Called = 1;
    var TotalDiv = $(".question").length;
    $(".question").filter(":first").css("display","block"); 
    $(".reveal").click(function()
        {
        Called++;
        $("#questions-container").find(":visible").hide().next().show();
        if(Called == TotalDiv)
            {
            $(this).hide();
            }
        });
    });
</script>
<style type="text/css">
.question{display:none;}
</style> 
  </head>
  <body>
<div id="questions-container">
    <div class="question">
     division one
    </div>
    <div class="question">
     division two
    </div>
    <div class="question">
     division three
    </div>
    <div class="question">
     division foor
    </div>  
</div>
<input type="button" class="reveal" value="NEXT" />
  </body>
</html>
于 2013-01-17T21:15:30.230 に答える