Javascript 在对象数组中循环并单击显示

我正在尝试做一个有趣的测验应用程序，这里是我到目前为止所做的。我创建了这个数组，我希望能够在每次用户点击“提交”按钮时，通过它循环并打印出问题和选项作为单选输入

这就是我目前所拥有的。我意识到现在我只是打印问题1，但我不太确定如何从这里开始

var q = [{
        question1: "What is the capital of California?",
        choices: ["LA", "SF", "Sac"],
        correctAnswer:"Sacramento"},
        {question2: "What is the capital of Arizona?",
        choices: ["A", "B", "C"],
        correctAnswer:"B"},
        {question3: "What is the capital of Washington?",
        choices: ["D", "E", "F"],
        correctAnswer:"E"}];

问题：如何正确循环此数组并打印每个问题及其选项。你可以在上面看到我的尝试

在问题数组中使用相同类型的索引，以便更好地管理

使用更好的方法检查/侦听单击。在每个

中使用它们不会有帮助

使用全局变量循环回答问题

更新的小提琴的链接。jQuery代码（更改了很多）如下所示：

(function () {

    function init() {
        $('.submitBtn').hide();
        generateQuestions();
    }

    function generateQuestions() {

        var q = [{
            question1: "What is the capital of California?",
            choices: ["Los Angeles", "San Francisco", "Sacramento"],
            correctAnswer: "Sacramento"
        }, {
            question2: "What is the capital of Arizon?",
            choices: ["Los Angeles", "San Francisco", "Sacramento"],
            correctAnswer: "Sacramento"
        }, {
            question3: "What is the capital of Washington?",
            choices: ["Los Angeles", "San Francisco", "Sacramento"],
            correctAnswer: "Sacramento"
        }];

        var quiz = $('.quiz');

        $.each(q, function (index, obj) {
            $.each(obj, function (key, value) {
                $('.getStarted').click(function () {
                    $(this).fadeOut(500);
                    quiz.append(obj.question1);
                    $('.submitBtn').fadeIn(500);
                });
            });

        });

    }

    init();

})();

var i=0；
变量q=[{
问题：“加利福尼亚州的首都是什么？”，
选择：[“洛杉矶”、“旧金山”、“萨克拉门托”]，
正确答案：“萨克拉门托”
}, {
问：“阿里森的首都是什么？”，
选择：[“洛杉矶”、“旧金山”、“萨克拉门托”]，
正确答案：“萨克拉门托”
}, {
问题：“华盛顿的首都是什么？”，
选择：[“洛杉矶”、“旧金山”、“萨克拉门托”]，
正确答案：“萨克拉门托”
}];
var-ansWer=“”；
$（'#测验容器，#btn容器.submitBtn'）.hide（）；
函数generateQuestions（）{
$（'#测验容器，#btn容器.submitBtn'）.fadeIn（'slow'）；
var txt=“”+q[i]。问题+“
”；
$（q[i].选项）。每个（函数（idx，值）{
txt+=“”+值；
});
答案=q[i]。正确答案；
$（'.quick'）.html（txt）；
i=+i%q.长度；
}
$（'.getStarted'）。在（'click'，函数（）{
$（this.parent（）.fadeOut（200）；
generateQuestions（）；
});
$（'.submitBtn'）。on（'click'，函数（e）{
e、 停止传播（）；
if（ansWer==$（'.quick输入：选中'）.val（））generateQuestions（）；
});

---

我完成了作业，有很多空闲时间，所以重写了整个脚本P

所有对象应使用相同的键，例如

问题

，而不是

问题1

，

问题2

等

var i = 0;
var q = [{
    question: "What is the capital of California?",
    choices: ["Los Angeles", "San Francisco", "Sacramento"],
    correctAnswer: "Sacramento"
}, {
    question: "What is the capital of Arizon?",
    choices: ["Los Angeles", "San Francisco", "Sacramento"],
    correctAnswer: "Sacramento"
}, {
    question: "What is the capital of Washington?",
    choices: ["Los Angeles", "San Francisco", "Sacramento"],
    correctAnswer: "Sacramento"
}];
var ansWer = "";
$('#quiz-container, #btn-container .submitBtn').hide();

function generateQuestions() {
    $('#quiz-container, #btn-container .submitBtn').fadeIn('slow');
    var txt = "<h3>" + q[i].question + "</h3><br />";
    $(q[i].choices).each(function (idx, valuE) {
        txt += "<input type='radio' name='choice' value='" + valuE + "' />" + valuE;
    });
    ansWer = q[i].correctAnswer;
    $('.quiz').html(txt);
    i = ++i % q.length;
}
$('.getStarted').on('click', function () {
    $(this).parent().fadeOut(200);
    generateQuestions();
});
$('.submitBtn').on('click', function (e) {
    e.stopPropagation();
    if (ansWer == $('.quiz input:checked').val()) generateQuestions();

});

然后，您需要为问题设置一个循环，为选项设置一个嵌套循环：

    var q = [{
        question: "What is the capital of California?",
        choices: ["Los Angeles", "San Francisco", "Sacramento"],
        correctAnswer: "Sacramento"
    }, {
        question: "What is the capital of Arizon?",
        choices: ["Los Angeles", "San Francisco", "Sacramento"],
        correctAnswer: "Sacramento"
    }, {
        question: "What is the capital of Washington?",
        choices: ["Los Angeles", "San Francisco", "Sacramento"],
        correctAnswer: "Sacramento"
    }];

$。每个（q，函数（i，obj）{
var select=quick.append（“”+obj.question+“”）；
$.each（对象选项，函数（j，选项）{
select.append（“”+choice+“”）；
});
});

---

您不应该在循环中建立一个click处理程序来调用此代码，这应该只做一次。

您可以使用一个常规的javascript循环。另外，我猜您希望打印每个问题，因此您的问题对象可能应该具有名称属性，而不是问题1、问题2等

$.each(q, function(i, obj) {
    var select = quiz.append('<select id="question'+i+'">'+obj.question+'</select>');
    $.each(obj.choices, function(j, choice) {
        select.append('<option value="'+j+'">'+choice+'</option>');
    });
});

function generateQuestions（）{
变量q=[{
姓名：“加利福尼亚州的首府是什么？”，
选择：[“洛杉矶”、“旧金山”、“萨克拉门托”]，
正确答案：“萨克拉门托”
}, {
姓名：“阿里森的首都是什么？”，
选择：[“洛杉矶”、“旧金山”、“萨克拉门托”]，
正确答案：“萨克拉门托”
}, {
姓名：“华盛顿的首都是什么？”，
选择：[“洛杉矶”、“旧金山”、“萨克拉门托”]，
正确答案：“萨克拉门托”
}];
对于（变量i=0；i

Soooo你的问题是什么？对不起，我不太清楚。我不完全确定如何打印q1和选择onclick。我不熟悉jQuery。如果您单击JSFIDLE，您可以看到我的可怕尝试。谢谢！我犯了一些微不足道的错误。非常感谢。

function generateQuestions() {

 var q = [{
    name: "What is the capital of California?",
    choices: ["Los Angeles", "San Francisco", "Sacramento"],
    correctAnswer: "Sacramento"
 }, {
    name: "What is the capital of Arizon?",
    choices: ["Los Angeles", "San Francisco", "Sacramento"],
    correctAnswer: "Sacramento"
 }, {
    name: "What is the capital of Washington?",
    choices: ["Los Angeles", "San Francisco", "Sacramento"],
    correctAnswer: "Sacramento"
 }];

for(var i = 0; i < q.length; i++) {
  var $quiz = $('.quiz');
  var question = q[i];
  $quiz.append(question.name);

  for(var j = 0; j < question.choices.length; j++) {
    $quiz.append(question.choices[j]);
  }
}
}