[英]Trying to display the content of radio buttons in a form
I am creating a quiz using jQuery. 我正在使用jQuery创建测验。 I have established the quiz questions and answers in a 2-dimensional array. 我已经建立了二维数组中的测验问题和答案。 I have the answer choices (1-5) displayed in a separate array. 我将答案选项(1-5)显示在单独的数组中。 I have stored the answer choices to temporary variables and want to display them next to radio buttons. 我已将答案选择存储到临时变量中,并希望将其显示在单选按钮旁边。 The answer choices (noted in my code as answerA=answerChoices[j][0], etc) are being input correctly but they are not displaying. 答案选项(在我的代码中标记为answerA = answerChoices [j] [0]等)已正确输入,但未显示。 When I inspect the elements in Chrome, I see that they are being brought in. However they are not displaying next to the form element in #quizQuestion. 当我检查Chrome中的元素时,我看到它们已被引入。但是,它们没有显示在#quizQuestion中的form元素旁边。
I am sure I am doing something silly but cannot identify it. 我确定我做的事很愚蠢,但无法识别。 CAN YOU HELP? 你能帮我吗?
Here's the html: 这是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-->
And here's the jQuery: 这是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);
}
});
});
You can't set text()
to a radio button, so you have to have some kind of label next to the radio button: 您不能将text()
设置为单选按钮,因此单选按钮旁边必须具有某种标签:
update: 更新:
<input type="radio" value="a" id="answerA" name="quizAnswer">
to 至
<input type="radio" value="a" id="answerA" name="quizAnswer">
<label for="answerA"></label>
and update your jQuery: 并更新您的jQuery:
$('form #answerA').text(answerA);
to: 至:
$('form label[for="answerA"]').text(answerA);
JSFiddle Example JSFiddle示例
http://jsfiddle.net/moogs/RWk3E/1/ http://jsfiddle.net/moogs/RWk3E/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.