Javascript 如何使用jQuery用数组项填充UL？

尝试使用jQuery将数组值放入单选按钮的

ul

HTML

<div class="quizWindow">
<h1>The Bridge Of Death</h1>
    <div id="question"></div>
        <form>
         <ul id = "choices">

         </ul>
        </form>
    <div id = "quizMessage"></div>
    <div id = "result"></div>
    <div id = "nextButton"><span>Start Quiz</span></div>
<br>
</div>

死亡之桥


开始测验

JS

var allQuestions = [{question: "What, is your name?", choices: ["Sir Lancelot the brave", "Sir Galahad the brave", "Sir not appearing in this film"], correctAnswer: 1}, {question: "What, is your quest?", choices: ["To seek the holy grail", "To dream the impossible dream", "To get back on the horse"], correctAnswer: 1 }, {question: "What is the airspeed velocity of an unladen swallow?", choices: ["16mph", "I don't know that!", "What do you mean; an african or a european swallow?"], correctAnswer: 3}];

$(document).ready(function () {
    //Start Quiz, show first set of questions
    $('#nextButton').click(function () {
        $('#question').text(allQuestions[0].question);
            for (var i = 0; i <= allQuestions.length; i++) {

            $.each(allQuestions, function(i, question) {
                var $ul = $('<ul/>'); //make a new ul for this question

                //iterate through each choice for this question
                $.each(question.choices, function (i, choices) {
                    //add the choice to the ul
                    $ul.append('<li><label><input type="radio" name="question' + i + '" value="' + choices + '"> ' + choices + '</label></li>');
                });

                //add the new ul to the form
                $('.choices').append($ul);
            });
        }
    });
});

var allQuestions=[{问题：“你叫什么名字？”，选项：[“勇敢的兰斯洛特爵士”，“勇敢的加拉哈德爵士”，“没有在这部电影中出现的爵士”]，正确答案：1}，{问题：“你的追求是什么？”，选项：[“寻找圣杯”，“做不可能的梦”，“回到马上”]，正确答案：1}，{问题：“空载燕子的空速是多少？”，选项：[“16英里/小时”，“我不知道！”，“你是什么意思；非洲燕子还是欧洲燕子？”，正确答案：3}]；
$（文档）.ready（函数（）{
//开始测验，展示第一组问题
$（“#下一个按钮”）。单击（函数（）{
$（“#问题”）.text（所有问题[0]。问题）；
对于（var i=0；i是的，您需要循环。尝试类似的方法

var $ul = $('ul.yourUl');

for(var i = 0; i < allQuestions.length; i++) {
    var $li = $("<li></li>"); //Do whatever is needed to make this li

    $ul.append($li);
}

var$ul=$（'ul.yourUl'）；
对于（var i=0；i”）；//执行任何需要的操作以生成此li
$ul.附加（$li）；
}
您可以轻松地使用
$。每个
都可以迭代对象和数组。请注意，我已将每个输入的
名称
更改为
'question'+问题编号
。这是因为显然不能有多个问题都具有相同的
名称

//iterate through each question
$.each(allQuestions, function(i, question){
    var $ul = $('<ul/>'); //make a new ul for this question

    //iterate through each choice for this question
    $.each(question.choices, function(ii, choice){
        //add the choice to the ul
        $ul.append('<li><label><input type="radio" name="question'+i+'" value="'+choice+'"> '+choice+'</label></li>');
    });

    //add the new ul to the form
    $('.choices').append($ul)
});

//反复检查每个问题
$。每个（所有问题，功能（i，问题）{
var$ul=$（“
”）；//为这个问题创建一个新的ul
//反复检查此问题的每个选项
美元。每个（问题。选项，功能（二，选项）{
//将选项添加到ul
$ul.append（'
'+choice+'
'）；
});
//将新ul添加到表单中
$（'.choices'）。追加（$ul）
});
您只需要为
或
$创建一个普通的
。each（）
循环。显示您尝试的内容，我们将帮助您修复它。此外，显示您希望生成的HTML外观。