本文详解如何通过 javascript 实现单页问答应用中的题目顺序切换逻辑，重点解决点击按钮后不刷新页面、动态更新题目与选项的核心交互问题，并提供可立即运行的完整代码示例。
本文详解如何通过 javascript 实现单页问答应用中的题目顺序切换逻辑，重点解决点击按钮后不刷新页面、动态更新题目与选项的核心交互问题，并提供可立即运行的完整代码示例。
在构建交互式测验（Quiz）应用时，一个常见且关键的需求是：用户点击「下一题」按钮后，页面应立即渲染下一道题目及其选项，而非跳转页面或触发刷新。这要求我们精确控制状态（当前题号）、dom 更新逻辑与事件响应流程。从提问者的代码可见，其已正确维护 currentQuestionIndex 并为按钮绑定了递增操作，但遗漏了关键一步——在索引更新后主动调用 displayQuestion() 重新渲染界面。
下面是一个结构清晰、健壮可用的完整实现方案：
✅ 正确逻辑流程
- 初始化题库与当前索引（currentQuestionIndex = 0）；
- 首次调用 displayQuestion() 渲染第一题；
- 「下一题」按钮点击时：
- 检查是否还有剩余题目（防止越界）；
- 递增 currentQuestionIndex；
- 立即调用 displayQuestion() 刷新 DOM；
- 每次 displayQuestion() 执行时，清空旧选项容器，重建新题目与选项，并绑定点击验证逻辑。
? 完整可运行代码示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>问答测验</title> <style> .container { max-width: 600px; margin: 2rem auto; padding: 0 1rem; font-family: -apple-system, sans-serif; } .title { font-size: 1.4rem; font-weight: bold; margin-bottom: 1.2rem; color: #333; } .options { margin-bottom: 1.5rem; } .answer { padding: 0.75rem 1rem; margin-bottom: 0.5rem; background: #f8f9fa; border-radius: 6px; cursor: pointer; transition: all 0.2s; border: 1px solid #e2e8f0; } .answer:hover { background: #edf2f7; } .next { padding: 0.75rem 1.5rem; background: #4299e1; color: white; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; transition: opacity 0.2s; } .next:disabled { opacity: 0.6; cursor: not-allowed; } </style> </head> <body> <div class="container"> <h2 class="title"></h2> <div class="options"></div> <button class="next">下一题</button> </div> <script> const Questions = [ { question: "Which planet has the largest size in our Solar System?", options: ["Mars", "Venus", "Jupiter", "Neptune"], correctAnswer: "Jupiter", }, { question: "Which element is represented by the symbol 'Fe' in the periodic table?", options: ["Iron", "Phosphorus", "Copper", "Silver"], correctAnswer: "Iron", }, // 其余题目保持原样（共10题） { question: "Which renowned scientist formulated the equation 'E=mc²'?", options: ["Isaac Newton", "Galileo Galilei", "Albert Einstein", "Nikola Tesla"], correctAnswer: "Albert Einstein", } ]; let currentQuestionIndex = 0; let score = 0; const container = document.querySelector(".container"); const titleEl = document.querySelector(".title"); const optionsEl = document.querySelector(".options"); const nextBtn = document.querySelector(".next"); // 渲染当前题目及选项 function displayQuestion() { // 清空上一题的选项 optionsEl.innerHTML = ""; const currentQuestion = Questions[currentQuestionIndex]; titleEl.textContent = currentQuestion.question; currentQuestion.options.forEach((option) => { const answerEl = document.createElement("div"); answerEl.className = "answer"; answerEl.textContent = option; optionsEl.appendChild(answerEl); answerEl.addEventListener("click", () => checkAnswer(option)); }); } // 验证答案并更新分数 function checkAnswer(selectedOption) { const currentQuestion = Questions[currentQuestionIndex]; if (selectedOption === currentQuestion.correctAnswer) { score++; } // 启用「下一题」按钮（若之前被禁用） nextBtn.disabled = false; } // 「下一题」点击处理 nextBtn.addEventListener("click", () => { // 防止越界：仅当还有下一题时才前进 if (currentQuestionIndex < Questions.Length - 1) { currentQuestionIndex++; displayQuestion(); // ✅ 关键：必须在此处重新渲染！ } else { // 最后一题后显示结果 titleEl.textContent = `测验结束！得分：${score}/${Questions.length}`; optionsEl.innerHTML = ""; nextBtn.disabled = true; } }); // 初始化显示第一题 displayQuestion(); </script> </body> </html>⚠️ 注意事项与最佳实践
- DOM 清空不可省略：每次调用 displayQuestion() 前务必清空 .options 容器（如 optionsEl.innerHTML = “”），否则选项会不断累加。
- 边界检查至关重要：在 nextBtn 点击回调中加入 if (currentQuestionIndex
- 状态同步原则：任何影响视图的状态变更（如 currentQuestionIndex++），都必须紧随其后触发对应渲染函数，这是单页应用响应式更新的核心契约。
- 用户体验增强建议：可进一步添加「已选中」样式反馈、答题计时器、进度条或动画过渡效果，提升交互质感。
掌握这一模式后，你不仅能实现基础题目切换，还可轻松扩展为支持上一题回退、答案高亮、错题回顾等进阶功能。核心始终不变：状态驱动视图，变更即重绘。