显示在阵列的所有项目通过一个for循环+ jquery的

Question

我在与一个问题的问题在代码与正确显示的选择阵列底部环。该循环的控制台日志将带回数组中的所有四个项目，所以我认为这不正确。但$(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变量实际上拥有所有的答案4个元素。当您执行.append操作时，请将i'th选项附加到i'元素中。

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(); 
 
});

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

Answer 2

你调用get选择列表实际上返回多个项目。我想你只需要一个外循环：

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); 
     }; 
    }; 
};