本文详解如何通过 javascript 实现单页问答应用中的题目顺序切换逻辑，核心在于正确更新索引并重新渲染当前题目与选项，避免因遗漏调用渲染函数导致界面不更新的问题。
本文详解如何通过 javascript 实现单页问答应用中的题目顺序切换逻辑，核心在于正确更新索引并重新渲染当前题目与选项，避免因遗漏调用渲染函数导致界面不更新的问题。
在构建交互式问答系统（如小测验、知识竞答）时，一个常见且关键的需求是：用户点击「下一题」按钮后，页面应立即展示下一道题目及对应选项。许多开发者会卡在看似简单的 currentQuestionIndex++ 操作上——代码执行了，但界面毫无反应。根本原因往往不是逻辑错误，而是状态更新后未触发视图重绘。
下面是一个结构清晰、可直接运行的完整实现方案：
✅ 正确的核心逻辑
每次点击「下一题」时，需完成三步：
- 递增题号索引（currentQuestionIndex++）；
- 边界检查（防止越界访问数组）；
- 主动调用渲染函数（displayQuestion()），使 DOM 实时反映新题目。
? 完整可运行示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>问答系统 - 下一题切换</title>
<style>
.container { max-width: 600px; margin: 2rem auto; padding: 1rem; font-family: "Segoe UI", sans-serif; }
.title { font-size: 1.4rem; font-weight: bold; margin-bottom: 1.5rem; color: #2c3e50; }
.options { margin-bottom: 2rem; }
.answer {
padding: 0.75rem 1rem;
margin: 0.5rem 0;
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.answer:hover { background: #e9ecef; }
.next {
padding: 0.75rem 1.5rem;
background: #007bff;
color: white;
border: none;
border-radius: 6px;
font-size: 1rem;
cursor: pointer;
transition: background 0.2s;
}
.next:hover:not(:disabled) { background: #0056b3; }
.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题）
];
let currentQuestionIndex = 0;
const container = document.querySelector(".container");
const titleEl = document.querySelector(".title");
const optionsEl = document.querySelector(".options");
const nextBtn = document.querySelector(".next");
// 渲染当前题目及选项
function displayQuestion() {
if (currentQuestionIndex >= Questions.length) {
titleEl.textContent = "? 测验结束！";
optionsEl.innerHTML = `<p>您的得分：${score}/${Questions.length}</p>`;
nextBtn.disabled = true;
return;
}
const q = Questions[currentQuestionIndex];
titleEl.textContent = q.question;
optionsEl.innerHTML = ""; // 清空旧选项
q.options.forEach((option, idx) => {
const answerEl = document.createElement("div");
answerEl.className = "answer";
answerEl.textContent = `${String.fromCharCode(65 + idx)}. ${option}`; // A. Mars
answerEl.addEventListener("click", () => checkAnswer(option));
optionsEl.appendChild(answerEl);
});
}
let score = 0;
function checkAnswer(selectedOption) {
const q = Questions[currentQuestionIndex];
if (selectedOption === q.correctAnswer) score++;
}
// 「下一题」按钮事件处理
nextBtn.addEventListener("click", () => {
currentQuestionIndex++; // 步骤1：更新索引
displayQuestion(); // 步骤2：强制重绘（关键！）
});
// 初始化首题
displayQuestion();
</script>
</body>
</html>⚠️ 常见陷阱与注意事项
- ❌ 遗忘调用 displayQuestion()：仅修改 currentQuestionIndex 不会自动刷新 DOM，必须显式触发渲染。
- ❌ 未做越界防护：当 currentQuestionIndex 超出 Questions.length 时，应终止流程并展示完成页，否则将触发 undefined 错误。
- ❌ 多次绑定事件监听器：若在 displayQuestion() 中反复为 .answer 元素添加 click 事件而未清理，会导致重复响应。本例采用每次清空 .options 后重建元素的方式，天然规避该问题。
- ✅ 推荐增强点：可加入「上一题」按钮、计时器、答案高亮反馈或本地存储进度等功能，进一步提升用户体验。
掌握“状态更新 → 视图同步”的响应式思维，是前端交互开发的基石。只要确保每次数据变更后都调用对应的渲染逻辑，就能稳健支撑各类动态内容切换场景。
