試圖在表單中顯示單選按鈕的內容

Question

我正在使用jQuery創建測驗。 我已經在二維數組中建立了測驗問題和答案。 我有在單獨的數組中顯示的答案選項（1-5）。 我已將答案選項存儲到臨時變量，並希望在單選按鈕旁顯示它們。 答案選項（在我的代碼中標記爲answerA = answerChoices [j] [0]等）正在正確輸入，但它們沒有顯示。當我檢查Chrome中的元素時，我發現它們已被引入。但是，它們不會顯示在#quizQuestion中的表單元素旁邊。

我確定我在做一些愚蠢的事情，但無法識別它。你能幫我嗎？

這裏的HTML：

<!--practice quiz--> 
<div id="practiceQuestions"> 

<div class="questionBox"> 

    <div class="theQuestion"> 
    <span id="quizQuestion"><img src="images/Practice_Tips_Math.png"></span> 
    <INPUT type="submit" value="Start quiz now" id="startQuiz" class="viewable"> 

    <!--answer key beginsb--> 

    <div class="answerBox"> 
     <form name="answerForm"> 
     <input type="radio" value="a" id="answerA" name="quizAnswer"><br /> 
     <input type="radio" value="b" id="answerB" name="quizAnswer"><br /> 
     <input type="radio" value="c" id="answerC" name="quizAnswer"><br /> 
     <input type="radio" value="d" id="answerD" name="quizAnswer"><br /> 
     <input type="radio" value="e" id="answerE" name="quizAnswer"><br /> 
     </form></div> 
     <!--answer key end--> 

    </div> 

</div> 



</div> 
<!--practice quiz ends--> 

而這裏的jQuery的：

var questionAnswer=[ 
['How many moons does Earth have?',1], 
['How many moons does Saturn have?',31], 
['How many moons does Venus have?',0] 
]; 

var answerChoices=[ 
[1,2,3,4,5], 
[18,32,15,1,9], 
[3,5,1,0,9] 
] 

function askQuestion(j){ 
    //create radio button answer choices a-e 
    //var radioBtn =$('<input type="radio" name="rbtnCount" value="a" id="q1a"/><label for="q1a">'+question[0,1]+'</label><br/>'); 
    //display questions 
    //console.log(radioBtn); 
var answerA=answerChoices[j][0]; 
var answerB=answerChoices[j][1]; 
var answerC=answerChoices[j][2]; 
var answerD=answerChoices[j][3]; 
var answerE=answerChoices[j][4]; 

    if($('#startQuiz').is(':visible')) { 
     $('#startQuiz').toggle(); 
     } 
    if($('.answerBox').is(':hidden')) { 
     $('.answerBox').toggle(); 
     $('.answerBox').css('margin-top','20px'); 

     } 
     // display the question 
     $(".theQuestion").css('margin-top','75px'); 
     $("#quizQuestion").text(questionAnswer[j][0]); 
     //display the answers 
     $('form #answerA').text(answerA); 
     $('form #answerB').text(answerB); 
     $('form #answerC').text(answerC); 
     $('form #answerD').text(answerD); 
     $('form #answerE').text(answerE); 

    }; 

$(document).ready(function(){ 

    $('#startQuiz').on('click',function(event){ 
     event.preventDefault(); 

     for (var i=0; i<=questionAnswer.length; i++) 
      { 
       askQuestion(i); 
      } 
     }); 

}); 

Answer 1

你不能設置text()一個單選按鈕，所以你必須有旁邊的某種標籤單選按鈕：

更新：

<input type="radio" value="a" id="answerA" name="quizAnswer"> 

到

<input type="radio" value="a" id="answerA" name="quizAnswer"> 
<label for="answerA"></label> 

和更新您的jQuery：

$('form #answerA').text(answerA); 

到：

$('form label[for="answerA"]').text(answerA); 

的jsfiddle例

http://jsfiddle.net/moogs/RWk3E/1/