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

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

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

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

})();

小提琴

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

4

3 回答 3

2
  1. 在问题数组中使用相同类型的索引以获得更好的管理。
  2. 使用更好的方法来检查/监听点击。在内部使用它们each无济于事。
  3. 使用全局变量来循环问题。

这是更新小提琴的链接。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

于 2013-03-08T20:56:48.580 回答
1

您的所有对象都应该使用相同的键，例如question, not 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>');
    });
});

您不应该在循环内建立一个点击处理程序，这应该做一次，首先调用这个代码。

于 2013-03-08T20:57:21.003 回答
1

您可以只使用常规的 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]);
  }
}
}
于 2013-03-08T20:59:30.277 回答