Question

问题

我在代码底部遇到for循环问题，正确显示选项数组。循环的控制台日志将带回阵列中的所有四个项目，因此我认为这不正确。但是$(choiceList).append(choice)行将所有四个项目带回四次并将其用作所有四个单选按钮的文本标签。

图片

代码

<div class="answers">
    <div class="form-check text-center">
        <label class="form-check-label text-center">
        <input class="form-check-input" type="radio" name="answer" id="answer" value="1" required>
        </label>
    </div>

    <div class="form-check text-center">
        <label class="form-check-label text-center">
        <input class="form-check-input" type="radio" name="answer" id="answer" value="2">
        </label>
    </div>

    <div class="form-check text-center">
        <label class="form-check-label text-center">
        <input class="form-check-input" type="radio" name="answer" id="answer" value="3">
        </label>
    </div>

    <div class="form-check text-center">
        <label class="form-check-label text-center">
        <input class="form-check-input" type="radio" name="answer" id="answer" value="4">
        </label>
    </div>
</div>

let questions = [{
    question: "This is just a test question for later. What is the answer?",
    choices: ["Answer 1", "Answer 2", "Answer 3", "Answer 4"],
    correctAnswer: 1
    }, {
    question: "This is just another test question for later. What is the answer?",
    choices: ["Answer 1", "Answer 2", "Answer 3", "Answer 4"],
    correctAnswer: 3
    }];

let currentQuestion = 0;
let currentScore = 0;

function displayCurrentQuestion() {
    let question = questions[currentQuestion].question
    let questionDisplay = $('#quiz').find('.question-text')

    $(questionDisplay).text(question);

    let choiceList = $('#quiz').find('.form-check-label')
    let numChoices = questions[currentQuestion].choices.length;

    var choice;
    for(let i = 0; i < numChoices; i++) {
        choice = questions[currentQuestion].choices[i];
        console.log(choice);
        $(choiceList).append(choice);
    };
};

Answer 1

您获取choiceList的调用实际上会返回多个项目。我想你只需要一个外循环：

function displayCurrentQuestion() {
    let question = questions[currentQuestion].question
    let questionDisplay = $('#quiz').find('.question-text')

    $(questionDisplay).text(question);

    // this gets more than one dom element
    let choiceLists = $('#quiz').find('.form-check-label')
    let numChoices = questions[currentQuestion].choices.length;

    var choice;

    // So iterate over them
    for(let l = 0; i < choiceLists.length; l++) {
      choiceList = choiceLists[l];
      for(let i = 0; i < numChoices; i++) {
          choice = questions[currentQuestion].choices[i];
          console.log(choice);
          $(choiceList).append(choice);
      };
    };
};

Answer 2

您的choiceList变量实际上包含所有4个答案元素。执行.append操作时，请将i个选项附加到i个元素中。

＆＃13;

let questions = [{
    question: "This is just a test question for later. What is the answer?",
    choices: ["Answer 1", "Answer 2", "Answer 3", "Answer 4"],
    correctAnswer: 1
    }, {
    question: "This is just another test question for later. What is the answer?",
    choices: ["Answer 1", "Answer 2", "Answer 3", "Answer 4"],
    correctAnswer: 3
    }];

let currentQuestion = 0;
let currentScore = 0;

function displayCurrentQuestion() {
    let question = questions[currentQuestion].question
    let questionDisplay = $('#quiz').find('.question-text')

    $(questionDisplay).text(question);

    let choiceList = $('#quiz').find('.form-check-label')
    let numChoices = questions[currentQuestion].choices.length;

    var choice;
    for(let i = 0; i < numChoices; i++) {
        choice = questions[currentQuestion].choices[i];
        console.log(choice);

//This is line is changed
        $(choiceList[i]).append(choice);

    };
};

$(() => {
  displayCurrentQuestion();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quiz">
<p class="question-text"></p>
<div class="answers">
    <div class="form-check text-center">
        <label class="form-check-label text-center">
        <input class="form-check-input" type="radio" name="answer" id="answer" value="1" required>
        </label>
    </div>

    <div class="form-check text-center">
        <label class="form-check-label text-center">
        <input class="form-check-input" type="radio" name="answer" id="answer" value="2">
        </label>
    </div>

    <div class="form-check text-center">
        <label class="form-check-label text-center">
        <input class="form-check-input" type="radio" name="answer" id="answer" value="3">
        </label>
    </div>

    <div class="form-check text-center">
        <label class="form-check-label text-center">
        <input class="form-check-input" type="radio" name="answer" id="answer" value="4">
        </label>
    </div>
</div>

＆＃13;

通过for循环+ jquery

2 个答案: