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

Question

我的问题是将问题列表分成单独的div（使用javascript / html / c＃）。目前程序的工作原理是测验有一个主视图，显示内容部分，一旦完成，隐藏部分显示测验部分视图。

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

，Q＃1

- （多选）

-

Previousbtn NextBtn

，Q＃2

- （多选）

-

Previousbtn完成

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

我昨天下午和今天都碰到了墙，所以任何一般的指导都会受到赞赏。

由于

Answer 1

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

$(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>

Answer 2

对于Previous Next功能，您可以使用与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您需要根据模型编辑代码