Javascript/jQuery 琐事游戏 - 不显示下一个？在数组中

Question

好的，这是我遇到的问题-

我正在使用 jQuery 创建一个琐事游戏。第一个问题和一组答案正在加载，正确/错误答案被“分配”给正确的按钮。

但是，游戏并没有超过第一个问题。我的想法是，我单独的“下一个问题”函数在嵌套的 for 循环之外，这不在正确的范围内，无法知道移动到数组中的下一个问题。我最初有我的代码，所以它随机化了数组中的问题，但后来我遇到了重复的问题，我对尝试解决问题感到沮丧，所以我尝试了其他方法。

实际上，想一想——显示的第一个问题实际上是问题数组中的最后一项。

您可以在此处查看游戏- https://alyciamriley.github.io/atomic-trivia/ 回购在这里 - https://github.com/AlyciamRiley/atomic-trivia

我也包含了我的代码。

window.onload = function() {
  let intervalId;
  let timer = 10;
  //need set of questions

  let questionArray = [
    {
      question:
        "Who recorded the original version of the song "Hound Dog"?",
      answers: [
        'Willa Mae "Big Mama" Thornton',
        "Elvis Presley",
        "Carl Perkins",
        "Chuck Berry",
        "Miley Cyrus"
      ],
      correctAnswer: 'Willa Mae "Big Mama" Thornton'
    },
    {
      question:
        "Who was marketed by her record company as the "Female Elvis"?",
      answers: [
        "Wanda Jackson",
        "Janis Martin",
        "Patsy Cline",
        "Diana Ross",
        "Miley Cyrus"
      ],
      correctAnswer: "Janis Martin"
    },
    {
      question:
        "Who sang the 1957 song "Whole Lotta Shakin Goin On"?",
      answers: [
        "Elvis Presley",
        "Jerry Lee Lewis",
        "Gene Vincent",
        "Buddy Holly",
        "Miley Cyrus"
      ],
      correctAnswer: "Jerry Lee Lewis"
    },
    {
      question:
        ""Rebel-Rouser", "Cannonball", and "Because They Are Young" were all hits by which artist?",
      answers: [
        "The Big Bopper",
        "Jerry Lee Lewis",
        "Gene Vincent",
        "Duane Eddy",
        "Miley Cyrus"
      ],
      correctAnswer: "Duane Eddy"
    },

    {
      question:
        "Who spent three weeks at No.1 in 1957 with "That’ll be the Day"?",
      answers: [
        "Buddy Holly",
        "June Carter",
        "Little Richard",
        "Fats Domino",
        "Miley Cyrus"
      ],
      correctAnswer: "Buddy Holly"
    }
  ];

  // Needed functions--

  //start game (start the timer, get it to decrement, load first question) -- on click

  $("#startGame").on("click", function() {
    $("#startGame").replaceWith();

    startTimer();
    decrement();
    firstQuestion();
  });

  //this is your timer.  It is working.  Do not touch it.
  function startTimer() {
    intervalId = setInterval(decrement, 1000);
  }

  function decrement() {
    timer--;
    $("#countdown").html("<span>" + timer + "<span>");

    if (timer === 0) {
      stopTimer();
    }
  }

  function stopTimer() {
    clearInterval(intervalId);
    nextQuestion();
  }

  function firstQuestion() {
    //Get first question
    for (let i = 0; i < questionArray.length; i++) {
      $("#question-display").html(questionArray[i].question);

      //Loop through question array and create buttons for each answer
      // Clear button div of any newly created buttons
      $("#answer-display").empty();
      for (let j = 0; j < questionArray[i].answers.length; j++) {
        var a = $("<button>");

        // add class to the button
        a.addClass("btn-answer");
        // adds a data attribute
        a.data("name", questionArray[i].answers[j]);

        //label buttons
        a.text(questionArray[i].answers[j]);

        //if else statement, randomQuestion.answers is e qual to randomQuestion.correctAnswer, then add btn-correct answer

        if (questionArray[i].answers[j] == questionArray[i].correctAnswer) {
          a.addClass("btn-correctAnswer");
          a.addClass("btn-answer");
        } else {
          a.addClass("btn-answer");
        }

        $("#answer-display").append(a);
      }

      //adds button to div
      $("#answer-display").append(a);
    }
  }

  $("#answer-display").on("click", ".btn-answer", function(event) {
    //get answer from clicked element
    event.preventDefault();
    var answer = $(".btn-answer").val;
    //get correct answer from parent element
    var correctAnswer = $(this).hasClass("btn-correctAnswer");
    console.log(correctAnswer);
    //correct logic
    if (correctAnswer) {
      $("#alert-box").text("You got it, daddy-o!");
      // numberCorrect++;

      setTimeout(nextQuestion, 2000);
      stopTimer();
      // checkScore();
    } else {
      $("#alert-box").text(
        "You're cruisin' for a bruisin'- that answer is wrong!"
      );
      // numberIncorrect++;
      setTimeout(nextQuestion, 2000);
      stopTimer();
      // checkScore();
    }
  });

  function nextQuestion() {
    $("#question-display").empty();
    $("#answer-display").empty();
    $("#countdown").empty();

    timer = 11;
    startTimer();
    firstQuestion();
    console.log("nextQuestion is running!");
  }
};

Answer 1

问题出在您的nextQuestion 函数中。你一直在那个函数中调用firstQuestion()。好吧...您会一直收到您期望的第一个问题，因为每次调用该函数时，您都会将 i 重置为 0，并且循环再次从第一个问题开始。

更好的解决方案可能类似于getQuestion 函数，该函数接受要获取的问题的参数。因此，您可以将其称为 getQuestion(i)，其中 i 是您在循环的外部设置和递增的变量。