嘗試以表格形式顯示單選按鈕的內容

Question

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

我確定我做的事很愚蠢，但無法識別。 你能幫我嗎？

這是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/