Перебирать массив объектов только один раз

Question

$(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}];

Далее, однажды моя кнопка, с #next Идентификатор кликается, абзац с идентификатором #question следует изменить его текст со следующим вопросом из allQuestions массив.

Реальный результат? Когда я нажал на кнопку "Далее", функция перебирает все вопросы и показывает только последний.

Я попытался использовать решение из stackru, установив переменную 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

Answer 2

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

Answer 3

Вам нужно хранить текущий вопрос где-то снаружи и ссылаться на него, а не на ключ, передаваемый каждой функции, поскольку он всегда будет проходить через все, и вы увидите последний.

var intNum = 1;

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

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

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

ДЕМО ЗДЕСЬ