如何通過遞增訪問陣列中的下一個物件

let myQuestions = [
    {
        question: "What's 2 2?",
        answers: [
            { text: "4", correct: true },
            { text: "2", correct: false },
            { text: "10", correct: false },
            { text: "1", correct: false },
        ],
    },
    {
        question: "What's 10 10?",
        answers: [
            { text: "20", correct: true },
            { text: "2", correct: false },
            { text: "18", correct: false },
            { text: "0", correct: false },
        ],
    },
];
function startQuiz() {
    //container.style.visibility = "visible";
    //btn_start.style.visibility = "hidden";
    showQuestion(myQuestions[0]);
}
function showQuestion(questionAndAnswers) {
    alert(questionAndAnswers.question);
    //const shuffledAnswers = _.shuffle(questionAndAnswers.answers);
    //questionTag.innerText = questionAndAnswers.question;
    //answerTag[0].innerText = shuffledAnswers[0].text;
    //answerTag[1].innerText = shuffledAnswers[1].text;
    //answerTag[2].innerText = shuffledAnswers[2].text;
    //answerTag[3].innerText = shuffledAnswers[3].text;
}
function nextQuestion() {
    showQuestion(myQuestions[0]);
}

<input type='button' value='Start Quiz' onclick=startQuiz() />
<input type='button' value='Next question' onclick=nextQuestion() />

當我按下開始測驗并訪問我的陣列中的第一個物件時，第一個問題被呼叫，我如何使函式下一個問題作業，它基本上通過遞增訪問下一個物件，所以假設我添加問題 3 它繼續進行。

uj5u.com熱心網友回復：

取一個全域變數let currentQuestionIndex = 0;并更新您的nextQuestion函式，如下所示。還更新您的startQuiz()功能并設定currentQuestionIndex = 0;并替換showQuestion(myQuestions[0]);為nextQuestion();

function nextQuestion() {
  // Add condition so at last question it will stop at last question
  if (myQuestions.length > currentQuestionIndex) {
    showQuestion(myQuestions[currentQuestionIndex]);
    currentQuestionIndex  ;
  }
}

function startQuiz() {
  container.style.visibility = "visible";
  btn_start.style.visibility = "hidden";
  currentQuestionIndex = 0;
  nextQuestion();
}

您的完整代碼如下所示。我已經評論了你的一些代碼只是為了測驗目的。

let currentQuestionIndex = 0;
let myQuestions = [
    {
        question: "What's 2 2?",
        answers: [
            { text: "4", correct: true },
            { text: "2", correct: false },
            { text: "10", correct: false },
            { text: "1", correct: false },
        ],
    },
    {
        question: "What's 10 10?",
        answers: [
            { text: "20", correct: true },
            { text: "2", correct: false },
            { text: "18", correct: false },
            { text: "0", correct: false },
        ],
    },
];

function startQuiz() {
  //container.style.visibility = "visible";
  //btn_start.style.visibility = "hidden";
  currentQuestionIndex = 0;
  nextQuestion();
}

function showQuestion(questionAndAnswers) {
  // temp code for alert
  alert(questionAndAnswers.question);
  //const shuffledAnswers = _.shuffle(questionAndAnswers.answers);
  //questionTag.innerText = questionAndAnswers.question;
  //answerTag[0].innerText = shuffledAnswers[0].text;
  //answerTag[1].innerText = shuffledAnswers[1].text;
  //answerTag[2].innerText = shuffledAnswers[2].text;
  //answerTag[3].innerText = shuffledAnswers[3].text;
}

function nextQuestion() {
  // Add condition so at last question it will stop at last question
  if (myQuestions.length > currentQuestionIndex) {
    showQuestion(myQuestions[currentQuestionIndex]);
    currentQuestionIndex  ;
  }
}

<input type='button' value='Start Quiz' onclick=startQuiz() />
<input type='button' value='Next question' onclick=nextQuestion() />

uj5u.com熱心網友回復：

您可以存盤您當前的問題索引并使用它來逐步瀏覽串列：

let currentQuestionIndex = 0;
let myQuestions = [
    {
        question: "What's 2 2?",
        answers: [
            { text: "4", correct: true },
            { text: "2", correct: false },
            { text: "10", correct: false },
            { text: "1", correct: false },
        ],
    },
    {
        question: "What's 10 10?",
        answers: [
            { text: "20", correct: true },
            { text: "2", correct: false },
            { text: "18", correct: false },
            { text: "0", correct: false },
        ],
    },
];
function startQuiz() {
    container.style.visibility = "visible";
    btn_start.style.visibility = "hidden";
    showQuestion(myQuestions[0]);
}
function showQuestion(questionAndAnswers) {
    const shuffledAnswers = _.shuffle(questionAndAnswers.answers);
    questionTag.innerText = questionAndAnswers.question;
    answerTag[0].innerText = shuffledAnswers[0].text;
    answerTag[1].innerText = shuffledAnswers[1].text;
    answerTag[2].innerText = shuffledAnswers[2].text;
    answerTag[3].innerText = shuffledAnswers[3].text;
}
function nextQuestion() {
    const nextIndex = currentQuestionIndex   1;
    if (nextIndex < myQuestions.length - 1) {
      showQuestion(myQuestions[nextIndex]);
      currentQuestionIndex = nextIndex;
    } else {
        console.log('end of question list');
    }
}

標籤：

上一篇：如何根據內部物件列條件過濾陣列物件

下一篇：反應形式角形式組