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

【问题标题】：Hide current element and show the next one隐藏当前元素并显示下一个
【发布时间】：2013-01-17 19:13:36
【问题描述】：

我正在创建一个向您展示测验的 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>

您能否介绍一下如何实现此功能？谢谢

【问题讨论】：

标签： asp.net-mvc jquery asp.net-mvc-4

【解决方案1】：

将所有问题默认为display: none;，在页面加载时显示第一个问题（或使用具有display: block; 的另一个类.question.first，然后下一个按钮可以显示下一个问题：

$("#questions-container").find(":visible").hide().next().show();

【讨论】：

哇，你的速度真快！我在使用 JQuery 时真的有点吃力，你能推荐一些网站来练习吗？
真的没有比他们的docs更好的学习场所了，你几乎可以在jQuery中做任何关于DOM操作的事情，所以大部分时间你可以搜索并找到 i> 你在他们的文档中寻找什么。

【解决方案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>

【讨论】：

谢谢，它看起来更完整的解决方案。你介意检查我的另一个问题吗？ stackoverflow.com/questions/14388082/…
当您说 validate 时，您的意思是 validate 是否选中了一个框或 validate 是否选中了正确框
第一个，在我的问题模型中，我有一个名为 SelectedAnswer 的单选按钮属性。我设置了标签 [必需]