通過對象陣列循環，並點擊顯示

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

我試圖做一個測驗應用程序的樂趣，這裏是我到目前爲止。我創建了這個數組，我希望能夠遍歷它，並在每次用戶點擊「提交」按鈕時將問題和選擇打印爲無線電輸入。

這是我到目前爲止。我意識到現在我只打印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(); 

})(); 

FIDDLE

問題：如何正確遍歷這個數組並打印每個問題以及它的選擇。你可以在上面看到我的嘗試。

Answer 1

1. 使用同一種問題陣列更好的管理指標。
2. 使用更好的方法來檢查/監聽點擊。在each內使用它們將無濟於事。
3. 通過提問使用全局變量循環。

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循環。此外，我猜你想打印每個問題，所以你的問題對象可能應該有一個名稱屬性，而不是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]); 
    } 
} 
}