Question

我正在创建一个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>

您可以指导我如何实现此功能？感谢

Answer 1

默认所有问题display: none;，显示页面加载时的第一个问题（或另一个.question.first的{{1}}类，然后下一个按钮可以显示下一个问题：

display: block;

Answer 2

我知道你已经得到了答案。我在我的一个网站上做了一些非常接近的事情。这会计算你的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>

隐藏当前元素并显示下一个元素

2 个答案: