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

私は楽しみのためにクイズアプリを作ろうとしています、そしてこれが私がこれまでに持っているものです。この配列を作成しました。ユーザーが[送信]ボタンを押すたびに、この配列をループして、質問と選択肢をラジオ入力として出力できるようにしたいと思います。

これは私がこれまでに持っているものです。今は質問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();

})();

フィドル

質問：この配列を適切にループして、各質問をその選択肢とともに出力するにはどうすればよいですか。上記の私の試みを見ることができます。

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ではありません。question1question2

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

次に、質問用に1つのループを作成し、選択肢用にネストされたループを作成する必要があります。

$.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ループを使用できます。また、各質問を印刷したいと思います。そのため、質問オブジェクトには、おそらく、question1、question2などではなくname属性が必要です。

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 に答える