用对象动态填充 div答案

【问题标题】：dynamically populate div with object用对象动态填充 div
【发布时间】：2017-07-20 06:44:16
【问题描述】：

我想用 4 个琐事问题的问题 id 和 for 循环的答案填充一个 div。不幸的是，正如我现在所拥有的那样，我的代码只将问题 4 与 div 的答案放在一起，任何关于我做错了什么的想法都将不胜感激。

$(function() {
  var trivia = [{
    question: "01. What is CSS?",
    answers: ["Casscading Style Sheets", "Carrot steamed soup", "Corruoted style sheets", "Casscading stairs sheets"],
    correctAnswer: 0
  },{
    question: "02. Q2?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 1
  },{
    question: "03. Q3?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 3
  },{
    question: "04. Q4?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 3
  }];

  $("#startButton").on('click', function populate() {
    var testDiv = document.createElement("div");
    for (var i = 0; i < trivia.length; i++) {
      testDiv.innerHTML = '<h3>' + trivia[i].question + '</h3>' + '<div><form><p><input type="radio" name="answer" value="right">' +
      trivia[i].answers[0] + '</p>' +
        '<p><input type="radio" name ="answer" value="2">' + trivia[i].answers[1] + '</p>' +
        '<p><input type="radio" name ="answer" value="3">' + trivia[i].answers[2] + '</p>' +
        '<p><input type="radio" name ="answer" value="4">' + trivia[i].answers[3] + '</p>' +
        '<p></form> </div>';
    }
    var questionsDiv = document.getElementById('questions');
    questionsDiv.appendChild(testDiv);
  });
});

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

<button id="startButton" type="button">Start</button>

【问题讨论】：

您的问题是由拼写错误引起的；您在每次迭代时都会覆盖innerHTML。将testDiv.innerHTML = ... 更改为testDiv.innerHTML += ...
将testDiv.innerHTML = 更改为testDiv.innerHTML += ，它将显示所有问题，而不仅仅是第4个问题。

标签： javascript jquery html object

【解决方案1】：

您在每个循环中都覆盖了您的 innerHtml。

$(function() {
  var trivia = [{
    question: "01. What is CSS?",
    answers: ["Casscading Style Sheets", "Carrot steamed soup", "Corruoted style sheets", "Casscading stairs sheets"],
    correctAnswer: 0
  },{
    question: "02. Q2?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 1
  },{
    question: "03. Q3?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 3
  },{
    question: "04. Q4?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 3
  }];

  $("#startButton").on('click', function populate() {
    var testDiv = document.createElement("div");
    for (var i = 0; i < trivia.length; i++) {
      testDiv.innerHTML += '<h3>' + trivia[i].question + '</h3>' + '<div><form><p><input type="radio" name="answer" value="right">' +
      trivia[i].answers[0] + '</p>' +
        '<p><input type="radio" name ="answer" value="2">' + trivia[i].answers[1] + '</p>' +
        '<p><input type="radio" name ="answer" value="3">' + trivia[i].answers[2] + '</p>' +
        '<p><input type="radio" name ="answer" value="4">' + trivia[i].answers[3] + '</p>' +
        '<p></form> </div>';
    }
    var questionsDiv = document.getElementById('questions');
    questionsDiv.appendChild(testDiv);
  });
});

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

<button id="startButton" type="button">Start</button>

【讨论】：

为什么同时使用document.createElement和jQuery？您可以建议使用 jQuery 的解决方案以使其更简洁。

【解决方案2】：

您不需要使用 for 循环在点击事件之外定义当前 qustion 编号，并在执行点击事件时增加。

$(function() {
  var trivia = [{
    question: "01. What is CSS?",
    answers: ["Casscading Style Sheets", "Carrot steamed soup", "Corruoted style sheets", "Casscading stairs sheets"],
    correctAnswer: 0
  }, {
    question: "02. Q2?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 1
  }, {
    question: "03. Q3?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 3
  }, {
    question: "04. Q4?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 3
  }];

  var currentQuestionNo = 0;

  $("#startButton").on('click', function populate() {
  
    //no more questions 
    if(currentQuestionNo > trivia.length -1){
       return;
    }
    
  
    var testDiv = document.createElement("div");

    testDiv.innerHTML = '<h3>' + trivia[currentQuestionNo].question + '</h3>' + '<div><form><p><input type="radio" name="answer" value="right">' +
      trivia[currentQuestionNo].answers[0] + '</p>' +
      '<p><input type="radio" name ="answer" value="2">' + trivia[currentQuestionNo].answers[1] + '</p>' +
      '<p><input type="radio" name ="answer" value="3">' + trivia[currentQuestionNo].answers[2] + '</p>' +
      '<p><input type="radio" name ="answer" value="4">' + trivia[currentQuestionNo].answers[3] + '</p>' +
      '<p></form> </div>';
    currentQuestionNo++;
    var questionsDiv = document.getElementById('questions');
    questionsDiv.appendChild(testDiv);
  });
});

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

<button id="startButton" type="button">Start</button>

【讨论】：

【解决方案3】：

你可以使用 jquery 来做到这一点：

$(function() {
  var trivia = [{
    question: "01. What is CSS?",
    answers: ["Casscading Style Sheets", "Carrot steamed soup", "Corruoted style sheets", "Casscading stairs sheets"],
    correctAnswer: 0
  },{
    question: "02. Q2?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 1
  },{
    question: "03. Q3?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 3
  },{
    question: "04. Q4?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 3
  }];

  $("#startButton").on('click', function() {
    var testDiv = '<div>';
    for (var i = 0; i < trivia.length; i++) {
      testDiv += '<h3>' + trivia[i].question + '</h3>' + '<div><form><p><input type="radio" name="answer" value="right">' +
      trivia[i].answers[0] + '</p>' +
        '<p><input type="radio" name ="answer" value="2">' + trivia[i].answers[1] + '</p>' +
        '<p><input type="radio" name ="answer" value="3">' + trivia[i].answers[2] + '</p>' +
        '<p><input type="radio" name ="answer" value="4">' + trivia[i].answers[3] + '</p>' +
        '<p></form> </div>';
    }
    testDiv += '</div>';        
    $('#questions').html(testDiv);
  });
});

【讨论】：