[英]Display all items in array through a for loop + jquery
Problem 问题
I'm having an issue with the for loop at the bottom of the code with displaying the choices array correctly. 我在代码底部的for循环中遇到问题,无法正确显示choices数组。 The console log for the loop is bringing back all four items in the array, so I don't think that's incorrect. 循环的控制台日志将带回数组中的所有四个项目,因此我认为这是不正确的。 But the $(choiceList).append(choice)
line is bringing back all four items four times and using that as the text label for all four radio buttons. 但是$(choiceList).append(choice)
行将所有四个项带回四次,并将其用作所有四个单选按钮的文本标签。
Image 图片
Code 码
<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);
};
};
Your call to get choiceList actually returns multiple items. 调用getchoiceList实际上返回多个项目。 I think you just need an outer loop: 我认为您只需要一个外循环:
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);
};
};
};
Your choiceList
variable actually has all 4 answer elements. 您的choiceList
变量实际上具有所有4个答案元素。 When you do .append
operation, append the i
'th choice into i
'th element. 当您执行.append
操作时,请将第i
个选择附加到第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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.