2

因此，我正在尝试进行动态测验，并且正在努力将文本添加到我的收音机输入中。我使用 for 循环进行多个无线电输入。我希望文本与每个单选选项位于同一行，但我无法做到这一点。

当我使用append()它时，它会创建一个新行，然后添加文本。

for (j = 0; j < 5; j++) {
            $('#target').append('<input type="radio" name="radioName"/>')
            $('#target').append('<p>My text here</p>');

当我使用label forhtml 属性时，它会在所有收音机的末尾添加文本。

for (j = 0; j < 5; j++) {
            $('#target').append('<input type="radio" name="radioName"/>').after("<label for='radio'>text here</label>");

这是我的 jsFiddle 显示示例：http: //jsfiddle.net/tCkuF/2/

理想情况下，我想添加一个将对象表示为文本的变量，以便在进行测验时自动更改。

4

3 回答 3

3

在这种情况下建议使用列表元素

<div id="container">
    <div id="question"></div>
    <div id="target">
        <ul id="options">

        </ul>
    </div>
</div>

还给样式

#options{
    list-style:none;
    list-style-type:none;
}

然后添加li元素。给予适当id的使用for属性

var $li = $("<li>").appendTo("#options");
$li.append('<input id="option' + (j+1) + '" type="radio" name="question' + i + '" value="' + allQuestions[i].correctAnswer + '"/>');
$li.append("<label for='option" + (j+1) + "'>test: label for adds all to the end    </label>");

演示：http: //jsfiddle.net/tCkuF/6/

于 2013-05-29T06:12:20.247 回答
2

radio只需在& 'label'周围添加一个 div 包装器，就可以实现您想要的输出。看看这个：

$(function () {
var i = 0;
var allQuestions = [{
    question: "What is 4x6?",
    choices: [46, 15, 25, 24],
    correctAnswer: 3
}, {
    question: "What is 21x 21?",
    choices: [441, 2121, 388],
    correctAnswer: 0
}, {
    question: "Which number is prime?",
    choices: [1, 5, 10, 39],
    correctAnswer: 1
}, {
    question: "What is 65/5",
    choices: [3, 31, 12, 13, 21],
    correctAnswer: 3
}];

function populateQuestion() {
    $("#question").text(allQuestions[i].question); //add question
    var $target = $('#target'),
        j = 0;
    //add radio and answer choices
    for (j; j < allQuestions.length; j++) {

        (function (idx) {

            var html = '<div class="answerRow"><input class="answerRadio" type="radio" name="question' + idx + '" value="' + allQuestions[idx].correctAnswer + '"/><label class="answerRadioLabel"  for="question' + idx + '">test: label for adds all to the end    </label>';
            $target.append(html);
        })(j);
    }
}

populateQuestion();


}); //onload jQuery close
于 2013-05-29T06:02:03.503 回答
1

您必须删除 ‍‍‍<code><p> 标签并<br/>在每一行添加一个额外的

$('#target').append('test append creates a line space<br/>');

在http://jsfiddle.net/tCkuF/3/查看演示

于 2013-05-29T05:51:53.787 回答