登录
首页 >  文章 >  前端

点击下一题自动切换题目教程

时间：2026-03-14 10:51:38 221浏览 收藏

本文深入解析了如何用纯 JavaScript 构建流畅、无刷新的单页问答测验应用，聚焦于“点击‘下一题’自动切换并渲染新题目”这一核心交互——从状态管理（currentQuestionIndex）、DOM 动态更新（清空旧选项、重建新题干与选项）、事件绑定到边界防护（防越界、防重复提交），手把手带你写出健壮可运行的完整代码，并揭示“状态变更后必须立即调用渲染函数”这一单页应用的关键设计契约，无论你是初学者想夯实交互逻辑，还是开发者寻求可复用的测验组件方案，都能即学即用、快速落地。

实现点击“下一题”按钮后自动切换并渲染新题目

本文详解如何通过 JavaScript 实现单页问答应用中的题目顺序切换逻辑，重点解决点击按钮后不刷新页面、动态更新题目与选项的核心交互问题，并提供可立即运行的完整代码示例。

本文详解如何通过 JavaScript 实现单页问答应用中的题目顺序切换逻辑，重点解决点击按钮后不刷新页面、动态更新题目与选项的核心交互问题，并提供可立即运行的完整代码示例。

在构建交互式测验（Quiz）应用时，一个常见且关键的需求是：用户点击「下一题」按钮后，页面应立即渲染下一道题目及其选项，而非跳转页面或触发刷新。这要求我们精确控制状态（当前题号）、DOM 更新逻辑与事件响应流程。从提问者的代码可见，其已正确维护 currentQuestionIndex 并为按钮绑定了递增操作，但遗漏了关键一步——在索引更新后主动调用 displayQuestion() 重新渲染界面。

下面是一个结构清晰、健壮可用的完整实现方案：

✅ 正确逻辑流程

  1. 初始化题库与当前索引（currentQuestionIndex = 0）；
  2. 首次调用 displayQuestion() 渲染第一题；
  3. 「下一题」按钮点击时：
    • 检查是否还有剩余题目（防止越界）；
    • 递增 currentQuestionIndex；
    • 立即调用 displayQuestion() 刷新 DOM；
  4. 每次 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 < Questions.length - 1) 判断，避免数组越界报错。
  • 状态同步原则：任何影响视图的状态变更（如 currentQuestionIndex++），都必须紧随其后触发对应渲染函数，这是单页应用响应式更新的核心契约。
  • 用户体验增强建议：可进一步添加「已选中」样式反馈、答题计时器、进度条或动画过渡效果，提升交互质感。

掌握这一模式后，你不仅能实现基础题目切换，还可轻松扩展为支持上一题回退、答案高亮、错题回顾等进阶功能。核心始终不变：状态驱动视图，变更即重绘。

今天关于《点击下一题自动切换题目教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>