本文旨在帮助开发者解决 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 能够反映其对应的答案索引。
<button id="answer-1" class='btn'>Answer 1</button> <button id="answer-2" class='btn'>Answer 2</button> <button id="answer-3" class='btn'>Answer 3</button> <button id="answer-4" class='btn'>Answer 4</button>
完整示例代码：
// 假设 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 是否在有效范围内。
总结
通过利用 event 对象获取按钮的 id，并将其传递给 checkAnswer 函数，我们可以轻松地判断用户选择的答案是否正确。同时，需要注意避免重复添加事件监听器，并考虑使用事件冒泡和捕获机制来优化性能。遵循这些最佳实践，可以构建一个高效、可维护的 Trivia 游戏。
