Question

我想写一个简单的测验，列出questionObj中存储的所有数据。首先，我想在容器quiz-container中显示问题以及可能的答案。

不幸的是，循环重复了先前问题的答案。我不知道如何摆脱这个错误。下面是我和jsFiddle一起编写的代码

$(document).ready(function() {
  var questionObj = {
    'JS': [{
        "question": "1. What is?",
        "correctAnswer": 2,
        'options': {
          "a": "Answer A",
          "b": "Answer B",
          "c": "Answer C",
          "d": "Answer D"
        }
      },
      {
        "question": "2. What is?",
        "correctAnswer": 2,
        'options': {
          "a": "2Answer A",
          "b": "2Answer B",
          "c": "2Answer C"
        }
      },
      {
        "question": "3. What is?",
        "correctAnswer": 2,
        'options': {
          "a": "3Answer A",
          "b": "3Answer B",
          "c": "3Answer C"
        }
      }
    ]
  }

  $('body').append('<h1 class="page-header"></h1>');
  $('.page-header').html("Quiz!");
  var answers = [];
  questionObj.JS.forEach(function(question, questionNumber) {
    $('body').append('<div class="quiz-container">' + question.question + '</div>')
    for (var letter in question.options) {
      $('.quiz-container').append('<li>' + question.options[letter] + '</li>')
    }
  })
})

body {
  background-color: red !important;
}

.page-header {
  font-size: 8rem;
  text-align: center;
  margin: 50px 0;
  color: white;
}

.quiz-container {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  background-color: white;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

https://jsfiddle.net/843gt5rg/

Answer 1

问题是因为你按类添加了div的答案，但是所有三个问题容器都有相同的类，因此每个问题的答案都是重复的。

要解决此问题，您应该创建问题容器并在变量中保留对它的引用。然后，你可以通过答案在循环中append()到该元素，如下所示：

questionObj.JS.forEach(function(question, questionNumber) {
  var $question = $('<div class="quiz-container">' + question.question + '</div>').appendTo('body');
  for (var letter in question.options) {
    $question.append('<li>' + question.options[letter] + '</li>')
  }
})

$(document).ready(function() {
  var questionObj = {
    'JS': [{
      "question": "1. What is?",
      "correctAnswer": 2,
      'options': {
        "a": "Answer A",
        "b": "Answer B",
        "c": "Answer C",
        "d": "Answer D"
      }
    },{
      "question": "2. What is?",
      "correctAnswer": 2,
      'options': {
        "a": "2Answer A",
        "b": "2Answer B",
        "c": "2Answer C"
      }
    },{
      "question": "3. What is?",
      "correctAnswer": 2,
      'options': {
        "a": "3Answer A",
        "b": "3Answer B",
        "c": "3Answer C"
      }
    }]
  }

  $('body').append('<h1 class="page-header"></h1>');
  $('.page-header').html("Quiz!");

  var answers = [];
  questionObj.JS.forEach(function(question, questionNumber) {
    var $question = $('<div class="quiz-container">' + question.question + '</div>').appendTo('body');
    for (var letter in question.options) {
      $question.append('<li>' + question.options[letter] + '</li>')
    }
  })
})

body {
  background-color: red !important;
}

.page-header {
  font-size: 8rem;
  text-align: center;
  margin: 50px 0;
  color: white;
}

.quiz-container {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  background-color: white;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

试试这个：

您将html附加到类的选择器，这对于所有问题都是相同的，我已经包含了 id 属性，该属性对于所有问题div都不同并使用< strong> id 选择器追加html：

x.columns = [x + '_' + i for x, i in zip(x.columns.get_level_values(0), x.columns.get_level_values(1))]
x
          sum_a  sum_b  max_a  max_b
date                                
1/1/2016      2      6      1      4
1/2/2016      1      1      1      1

我已经编辑过你jsfiddle：JS Fiddle

如何正确迭代对象并在页面上显示它

2 个答案: