Question

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"}];

我正在尝试制作一个有趣的测验应用程序，这是我到目前为止所拥有的。我创建了这个数组，我希望每次用户点击“提交”按钮时都可以循环播放并打印出问题和选项作为无线电输入。

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

(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();

})();

FIDDLE

问题：如何正确遍历此数组并打印每个问题以及它的选择。你可以在上面看到我的尝试。

Answer 1

在问题数组中使用相同类型的索引以便更好地进行管理。
使用更好的方法来检查/收听点击次数。在each中使用它们无济于事。
使用全局变量循环解决问题。

Here's指向更新小提琴的链接。 jQuery代码（改变了很多）如下：

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();

});

_{我完成了作业，并且有很多空闲时间，所以重写了整个剧本。：P}

Answer 2

您的所有对象都应使用相同的密钥，例如question，而非question1，question2等

    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"
    }];

然后你需要有一个问题循环，以及一个嵌套循环的选择：

$.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>');
    });
});

你不应该在循环中建立一个单击处理程序，应该这样做一次，以便首先调用这个代码。

Answer 3

你可以使用常规的javascript循环。另外，我猜你要打印每个问题，所以你的问题对象可能应该有一个name属性而不是question1，question2等。

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]);
  }
}
}

循环遍历对象数组并在单击时显示

3 个答案: