asp.net-mvc - 隐藏当前元素并显示下一个元素

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;，在页面加载时显示第一个问题(或使用具有 display: 的另一个类 .question.first) block;，然后下一个按钮可以显示下一个问题:

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