本文详解如何通过 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++），都必须紧随其后触发对应渲染函数，这是单页应用响应式更新的核心契约。
- 用户体验增强建议：可进一步添加「已选中」样式反馈、答题计时器、进度条或动画过渡效果，提升交互质感。
掌握这一模式后，你不仅能实现基础题目切换，还可轻松扩展为支持上一题回退、答案高亮、错题回顾等进阶功能。核心始终不变：状态驱动视图，变更即重绘。
