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

I know you have already got an answer to this. I do something very close to this in one of my sites. This counts your divs and shows the next button until you reach the last div and then it removes the button. I rewrote it to include your code above.

    <!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 回答