javascript - 仅迭代对象数组一次

Question

$(document).ready(function() {

allQuestions 是对象数组，其作用是提供问题(question)、答案(choices)和正确答案(正确答案) 我的应用程序。

        var allQuestions = [{question: "If you were a super hero what powers would you have?",
            choices: ["a", "b", "c", "d"],
            correctAnswer:0},

            {question: "Do you have a cherished childhood teddybear?",
                choices: ["e", "f", "g", "j"],
                correctAnswer:0},

            {question: "Whats your favourite non-alcoholic drink?",
                choices: ["i", "j", "k", "l"],
                correctAnswer:0},

            {question: "Are you religious?",
                choices: ["m", "n", "o", "p"],
                correctAnswer:0}];

接下来，一旦单击了 ID 为 #next 的按钮，ID 为 #question 的段落应该用下一个问题更改其文本 来自 allQuestions 数组。

真实结果？当我单击“下一步”按钮时，该函数会迭代所有问题，并且仅显示最后一个问题。

我尝试使用 stackoverflow 中的解决方案，设置 var hasLooped 但不起作用。

        $('#next').click(function(){
            //var hasLooped = false;
            $.each(allQuestions, function(key){

               // if(!hasLooped) {
                    $('#question').text(allQuestions[key].question);
               // }
               // hasLooped = true;
            })
        })
    });

Answer 1

将问题索引保存在变量中，并在单击#next 时递增它。

写下:

$(function () {
    var count = 0,
        len = allQuestions.length;
    $('#next').click(function () {
        if (count < len - 1) {
            count++;
            $('#question').text(allQuestions[count].question);
        } else {
            $(this).remove();
    });
});

fiddle