Question

我不知道为什么收音机只输出整个选线而不是每个选线。我正在尝试做一个测验/结果代码

HTML FILE

<html><br>
<head><br>
<meta charset="UTF-8"><br>
<title>Coffee Addict Quiz</title><br>
<link href="css/main.css" rel="stylesheet" type="text/css"><br>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><br>
</head>

<body>

<div id="container"><br>
<h1> How much of a coffee addict are you?</h1>

<div class="questionCon"></div><br>
<div class="questionCon"></div><br>
<div class="questionCon"></div><br>
<div class="questionCon"></div> <br>

</div><br>
<script src="js/questions.json"></script><br>
<script src="js/xml.js"></script>

</body><br>
</html>

JSON文件

[{
  "question": "What does your morning look like?",
  "choices": ["Go for run", "Make coffee", "Cant talk running late!!"]
}, {
  "question": "How many cups of coffee you drink in a day?",
  "choices": ["None", "1-3", "4-7"]
}, {
  "question": "Which sounds the best right now?",
  "choices": ["Cappuccino", "Latte", "Espresso"]
}, {
  "question": "Do you drink coffee to pull all nighters?",
  "choices": ["No, I like my sleep", "Sometimes", "Yes"]
}]

JS FILE

(function() {
    "use strict";
    var questionCons = document.querySelectorAll(".questionCon");
    console.log(questionCons)

    function loadquestions() {
        $.getJSON("js/questions.json")
          .done(function(questions) {
            console.log(questions);
            for (var i = 0; i < questions.length; i++) {
              questionCons[i].innerHTML += //plus and equal so it doesnt overright everyvalue.
                "<p>" + questions[i].question + "</p>" + '<input type="radio" >' + questions[i].choices;

            }
          })

        .fail(function() {
              alert("your browser is outdated");

Answer 1

以下是循环问题和每个问题选项的示例，包括在单选按钮上设置name和value属性（如果您打算提交形式）。

＆＃13;

var test = [{
  "question": "What does your morning look like?",
  "choices": ["Go for run", "Make coffee", "Cant talk running late!!"]
}, {
  "question": "How many cups of coffee you drink in a day?",
  "choices": ["None", "1-3", "4-7"]
}, {
  "question": "Which sounds the best right now?",
  "choices": ["Cappuccino", "Latte", "Espresso"]
}, {
  "question": "Do you drink coffee to pull all nighters?",
  "choices": ["No, I like my sleep", "Sometimes", "Yes"]
}]

var questions = document.getElementById('questions');

for (var i = 0; i < test.length; i++) {
  questions.innerHTML += "<p>" + test[i].question + "</p>";
  var questionId = 'question_' + i;
  for (var j = 0; j < test[i].choices.length; j++) {
    var choiceId = questionId + '_choice_' + j;
    questions.innerHTML += '<input id="' + choiceId + '" name="' + questionId + '" value="' + j + '" type="radio" ><label for="' + choiceId + '">' + test[i].choices[j] + '</label><br />';
  }
}

＆＃13;

* {
  font-family: Arial, sans-serif;
  font-size: 13px;
}

＆＃13;

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

＆＃13;

Answer 2

有效！需要在输入标记

中添加name属性

示例代码段：

＆＃13;

var test = [{
  "question": "What does your morning look like?",
  "choices": ["Go for run", "Make coffee", "Cant talk running late!!"]
}, {
  "question": "How many cups of coffee you drink in a day?",
  "choices": ["None", "1-3", "4-7"]
}, {
  "question": "Which sounds the best right now?",
  "choices": ["Cappuccino", "Latte", "Espresso"]
}, {
  "question": "Do you drink coffee to pull all nighters?",
  "choices": ["No, I like my sleep", "Sometimes", "Yes"]
}]

var questionCons = document.querySelectorAll(".questionCon");

for (var i = 0; i < test.length; i++) {
  questionCons[i].innerHTML += "<p>" + test[i].question + "</p>";
  $.each(test[i].choices, function(index, value) {
    questionCons[i].innerHTML += '<input type="radio" name=quistion"' + i + '" >' + value;
  })

}

＆＃13;

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

＆＃13;

Answer 3

因为你没有循环回答。一个（未经测试的）扩展名如下所示：

.done(function(questions) {
  console.log(questions);
  for (var i = 0; i < questions.length; i++) {
    questionCons[i].innerHTML += 
      "<p>" + questions[i].question + "</p>";
    for (var j = 0; j < questions[i].choices.length; j++) {
      questionCons[i].innerHTML += 
        '<input type="radio" >' + questions[i].choices[j];
    }
  }
})

我通常更喜欢使用map：

.done(function(questions) {
  console.log(questions);
  for (var i = 0; i < questions.length; i++) {
    questionCons[i].innerHTML += 
      "<p>" + questions[i].question + "</p>" +
      questions[i].choices.map(function(choice) {
        return '<input type="radio" >' + choice;
      });
  }
})

（也未经测试）

为什么我的json数组没有为每一行输出输入类型的无线电

3 个答案: