仅迭代对象数组一次答案

【问题标题】：Iterate over an array of objects only once仅迭代对象数组一次
【发布时间】：2014-08-28 23:02:12
【问题描述】：

$(document).ready(function() {

allQuestions 是对象数组，其角色为我的应用程序提供问题（question）、答案（choices）和正确响应（correctAnswer）。

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

【问题讨论】：

标签： javascript jquery arrays iterated-function

【解决方案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

【讨论】：

【解决方案2】：

您需要将当前问题存储在外部某处并引用该问题，而不是传递给每个函数的键，因为它始终会循环遍历所有问题，您会看到最后一个问题。

var intNum = 1;

$('#next').click(function(){

    $('#question').text(allQuestions[intNum].question);
    intNum++;
});

【讨论】：

【解决方案3】：

var clickCount = 0;
$('#next').click(function(){        
  $('#question').text(allQuestions[clickCount].question);       
  clickCount=(clickCount+1>9)?0:clickCount+1;
});

【讨论】：

为什么是(clickCount+1>9)?0:clickCount+1;？
只是迭代 allQuestions 数组
var MAX=10; clickCount=(clickCount+1)%MAX; 对我来说听起来更直观。
是的。这样更好。

【解决方案4】：

如果你不喜欢全局变量，你可以试试这个：

$('#next').click(function(){
    var counter = parseInt($("#next").attr("counter"));
    if (counter>=allQuestions.length){
        alert("No more questions!");
        return;
    }
    $('#question').text(allQuestions[counter].question);
    $("#next").attr("counter",counter+1);
});

DEMO HERE

【讨论】：