如何在JavaScript中循环遍历题目数组并实现逐题切换-js教程-PHP中文网

本文讲解如何通过索引控制和数组遍历，动态渲染多道选择题，并配合按钮实现“下一题”功能，涵盖状态管理、dom更新与事件绑定等核心要点。

本文讲解如何通过索引控制和数组遍历，动态渲染多道选择题，并配合按钮实现“下一题”功能，涵盖状态管理、dom更新与事件绑定等核心要点。

在构建交互式测验应用时，关键在于有序遍历题目数组并按需渲染当前题目及其选项。下面是一个结构清晰、可直接运行的完整实现方案。

✅ 核心思路

使用 currentQuestion 全局变量跟踪当前题号（从 0 开始）；
每次点击「下一题」时，递增索引并取模循环（或重置为 0），确保不越界；
利用 forEach() 遍历当前题的 answers 数组，动态填充预设按钮内容；
为每个答案按钮添加点击逻辑（如高亮正确答案、禁用交互等，本例聚焦切换逻辑）。

? 完整 HTML + JavaScript 示例

<div id="question"></div>
<button id="1" class="answer-btn"></button>
<button id="2" class="answer-btn"></button>
<button id="3" class="answer-btn"></button>
<button id="4" class="answer-btn"></button>
<button id="next" onclick="displayQuestions()">→ 下一题</button>

const questions = [
  {
    question: "Commonly used data types DO NOT include:",
    answers: [
      { Text: 'strings', correct: false },
      { Text: 'booleans', correct: false },
      { Text: 'alerts', correct: true },
      { Text: 'numbers', correct: false }
    ]
  },
  {
    question: 'The condition in an if else statement is enclosed within:___',
    answers: [
      { Text: 'parentheses', correct: true },
      { Text: 'curly brackets', correct: false },
      { Text: 'numbers and strings', correct: false },
      { Text: 'square brackets', correct: false }
    ]
  }
];

let currentQuestion = 0;
const questionDiv = document.getElementById('question');
const answerBtns = ['1', '2', '3', '4'].map(id => document.getElementById(id));

function displayQuestions() {
  // 更新题号：循环切换（0 → 1 → 0 → …）
  currentQuestion = (currentQuestion + 1) % questions.length;

  // 渲染题目标题（序号从 1 开始显示）
  questionDiv.textContent = `${currentQuestion + 1}. ${questions[currentQuestion].question}`;

  // 遍历当前题的所有答案，填入对应按钮
  questions[currentQuestion].answers.forEach((answer, index) => {
    if (answerBtns[index]) {
      answerBtns[index].textContent = answer.Text;
      // 可选：绑定点击响应（例如判断对错）
      answerBtns[index].onclick = () => handleAnswerClick(answer.correct);
    }
  });
}

// 示例：点击答案后的处理逻辑（可扩展）
function handleAnswerClick(isCorrect) {
  alert(isCorrect ? '✅ 正确！' : '❌ 再想想～');
}