将列表分成 div 以一次只显示一个

Question

我的问题是将问题列表分成单独的 div（使用 javascript/html/c#）。该程序目前的工作方式是有一个用于测验的主视图，它显示内容部分，一旦完成，就会隐藏该部分并显示测验部分视图。

目前这会按如下格式显示所有问题 （想象一个只有 2 个问题的测验）

Q#1

-(多选)

-

Previousbtn NextBtn

Q#2

-(多选)

-

Previousbtn 完成

我想要做的是一次只显示一个问题，方法是（大概）将每个问题分成自己的 div 并根据需要显示/隐藏它们（在 btn 点击下一个或上一个时）。

我昨天下午和今天都碰壁了，所以任何一般性的指导都将不胜感激。

谢谢

Answer 1

对于上一个下一个功能，您可以使用与 Aren 相同的功能，但要回答发布的问题，关于分离列表，请使用以下功能

您将拥有与上述相同的脚本

    var index = 0;
    var n = $("div.quiz-container").length;
    var a = n - 1

     $(".quiz-container:first").addClass("active").show();
    if (index == 0) {
      $("#prev").prop("disabled", true);
    }
    $("#next").on("click", function() {
      index++;
      $(".quiz-container.active").removeClass('active').hide();
      $(".quiz-container").eq(index).addClass('active').show();
      if (index == 0) {
        $("#prev").prop("disabled", true);
      } else if (index != 0) {
        $("#prev").prop("disabled", false);
      }
      if (index != a) {
        $("#next").prop("disabled", false);
      } else if (index == a) {
        $("#next").prop("disabled", true);
      }
    });
    $("#prev").on("click", function() {
      index--;
      $(".quiz-container.active").removeClass('active').hide();
      $(".quiz-container").eq(index).addClass('active').show();
      if (index == 0) {
        $("#prev").prop("disabled", true);
      } else if (index != 0) {
        $("#prev").prop("disabled", false);
      }
      if (index != a) {
        $("#next").prop("disabled", false);
      }
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quiz-container active">
  <p>Q: Question 1?</p>
  <ul>
    <li>choice1</li>
    <li>choice2</li>
    <li>choice3</li>
    <li>choice4</li>
  </ul>
</div>

<div class="quiz-container" style="display:none">
  <p>Q: Question 2?</p>
  <ul>
    <li>choice1</li>
    <li>choice2</li>
    <li>choice3</li>
    <li>choice4</li>
  </ul>
</div>

<div class="quiz-container" style="display:none">
  <p>Q: Question 3?</p>
  <ul>
    <li>choice1</li>
    <li>choice2</li>
    <li>choice3</li>
    <li>choice4</li>
  </ul>
</div>

<button id="prev">Previous</button>
<button id="next">Next</button>

但在您视图的 foreach 循环中，您将拥有：

foreach (var question in model.quiz) { 
 <div class="quiz-container">
      <h1>@question.QuestionTitle</h1>
      <ul>
           foreach (var answer in question.Answers) {
           <li>@answer</li>
           }
      </ul>
 </div>
 }

<button id="next">Next</button>
<button id="prev">Previous</button>

因此，您可以有不同数量的答案和不同数量的问题。希望这会有所帮助。

P.S 你需要根据你的模型编辑代码

Answer 2

这只是一个示例代码，您可以获取一些知识并添加您的额外逻辑来实现

$(function(){
	var index = 0;
	$(".quiz-container").addClass("inactive");
	$(".quiz-container:first").addClass("active");
	$("#next").on("click", function(){
		index++;
		$(".quiz-container.active").removeClass("active").addClass("inactive");
		$(".quiz-container").eq(index).removeClass("inactive").addClass(active);
	})
	$("#prev").on("click", function(){
		index--;
		$(".quiz-container.active").removeClass("active").addClass("inactive");
		$(".quiz-container").eq(index).removeClass("inactive").addClass(active);
	})
});

.active {
	display: block;
}
.inactive {
	display: none;
}

<div class="quiz-container">
<p>Q: Question?</p>
<ul>
<li>choice1</li>
<li>choice2</li>
<li>choice3</li>
<li>choice4</li>
</ul>
</div>

<div class="quiz-container">
<p>Q: Question?</p>
<ul>
<li>choice1</li>
<li>choice2</li>
<li>choice3</li>
<li>choice4</li>
</ul>
</div>

<div class="quiz-container">
<p>Q: Question?</p>
<ul>
<li>choice1</li>
<li>choice2</li>
<li>choice3</li>
<li>choice4</li>
</ul>
</div>