实现 Trivia 游戏中按钮索引获取与答案校验的完整指南_技术教程

本文旨在帮助开发者解决 Trivia 游戏中如何获取每个按钮的索引，并校验用户选择的答案是否正确的问题。我们将探讨如何利用事件监听器提供的 `event` 对象来区分点击的按钮，并提供可复用的示例代码，同时强调避免在生产环境中使用重复事件监听器的最佳实践，推荐使用事件冒泡和捕获机制。

获取按钮索引与答案校验

在 Trivia 游戏中，需要知道用户点击了哪个按钮，以便判断选择的答案是否正确。通常，每个按钮对应一个答案，而我们需要将用户选择的答案与正确答案进行比较。以下是如何实现这一目标的步骤：

1. 使用 event 对象区分点击的按钮

当使用 addEventListener 添加事件监听器时，回调函数会自动接收一个 event 对象作为参数。这个 event 对象包含了关于事件的各种信息，包括触发事件的元素。我们可以通过 event.target 属性访问到触发事件的按钮元素，并从中获取按钮的 id 或其他自定义属性，从而区分不同的按钮。

const buttons = document.querySelectorAll(".btn");

buttons.forEach((btnEl) =>
  btnEl.addEventListener("click", (event) => {
    const buttonId = event.target.id;
    console.log('button clicked id -', buttonId);
    checkAnswer(buttonId); // 调用 checkAnswer 函数，传入按钮的 ID
  })
);

2. 修改 checkAnswer 函数

修改 checkAnswer 函数，使其接收按钮的 id 作为参数，并根据 id 找到对应的答案。

function checkAnswer(buttonId) {
  const selectedAnswerIndex = parseInt(buttonId.split('-')[1]) - 1; // 从 buttonId 中提取答案索引（假设 buttonId 格式为 "answer-1", "answer-2" 等）
  const selectedAnswer = randomQuestion.answers[selectedAnswerIndex];
  const correctAnswer = randomQuestion.answers.find((answer) => answer.correct);

  if (selectedAnswer === correctAnswer) {
    console.log("Correct!");
  } else {
    console.log("Incorrect");
  }
}

3. HTML 结构

确保 HTML 结构中按钮的 id 能够反映其对应的答案索引。

完整示例代码：

// 假设 questions 数组和 randomQuestion 变量已经定义

const buttons = document.querySelectorAll(".btn");

buttons.forEach((btnEl) =>
  btnEl.addEventListener("click", (event) => {
    const buttonId = event.target.id;
    console.log('button clicked id -', buttonId);
    checkAnswer(buttonId);
  })
);

function checkAnswer(buttonId) {
  const selectedAnswerIndex = parseInt(buttonId.split('-')[1]) - 1; // 从 buttonId 中提取答案索引
  const selectedAnswer = randomQuestion.answers[selectedAnswerIndex];
  const correctAnswer = randomQuestion.answers.find((answer) => answer.correct);

  if (selectedAnswer.correct === true) {
    console.log("Correct!");
  } else {
    console.log("Incorrect");
  }
}

// 示例 questions 数组
const questions = [
    {
        question: 'What year did the United State gain independence?',
        answers: [
          { text: '1776', correct: true },
          { text: '1876', correct: false },
          { text: '1676', correct: false },
          { text: '1576', correct: false }
        ]
      },
      {
        question: 'What is the capital of France?',
        answers: [
          { text: 'London', correct: false },
          { text: 'Paris', correct: true },
          { text: 'Berlin', correct: false },
          { text: 'Rome', correct: false }
        ]
      }
];

// 随机选择一个问题
randomQuestion = questions[Math.floor(Math.random()*questions.length)];

注意事项与最佳实践

避免重复添加事件监听器： 在生产环境中，避免像示例代码中那样为每个按钮都添加独立的事件监听器。这会导致性能问题，特别是当按钮数量很多时。
利用事件冒泡和捕获： 推荐使用事件冒泡和捕获机制，将事件监听器添加到按钮的父元素上，然后通过 event.target 属性来判断是哪个按钮触发了事件。这可以显著减少事件监听器的数量，提高性能。
代码可读性： 使用清晰的变量名和注释，提高代码的可读性和可维护性。
错误处理： 增加错误处理机制，例如，检查 buttonId 是否有效，以及 selectedAnswerIndex 是否在有效范围内。