Question

所以我正在尝试进行动态测验，并且正在努力为我的无线电输入添加文字。我使用for循环来制作几个无线电输入。我希望文本与每个无线电选择在同一行，但我无法做到这一点。

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

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

当我使用label for html属性时，它会在所有无线电的末尾添加文本。

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/

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

Answer 1

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

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

Answer 2

只需在radio附近添加div包装即可实现所需的输出。 '标签'。检查此out：

$(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

Answer 3

您必须删除<p>代码并为每行添加额外的<br/>

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

在http://jsfiddle.net/tCkuF/3/

检查演示

jQuery-将文本添加到每个无线电输入的同一行

3 个答案: