顯示在陣列的所有項目通過一個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); 
     }; 
    }; 
};