我正在创建一个测验应用程序，它从 API 中提取数据，构建一系列问题，然后每次在测验页面上加载不同数量的“答案元素”，具体取决于从数组中随机选择的问题.
下面是创建一系列可点击的“玩家卡”的功能，这些卡是 CSS 卡样式的有效答案。这个想法是用户选择一张卡，然后单击检查按钮来运行该功能以检查是否正确。
除了一件事之外，该功能运行良好。用户可以选择所有卡。
我遇到的问题是，您可以单击所有答案，它们都会获得 CSS 类，并且数据会传递给所有选定的卡片/答案。
我只想让用户选择一个答案。他们可以单击任何卡片，然后改变主意，但他们只能选择一个答案，然后依次处理答案检查功能。
我不知道该怎么做？谁能帮助我理解我需要如何更改此代码才能实现这一点？
function addClickEvent(answers) {
const playerCard = document.querySelectorAll(".player-card");
for (i = 0; i < playerCard.length; i++) {
playerCard[i].setAttribute("id", [i]);
playerCard[i].addEventListener("click", (e) => {
clickedPlayer = e.target;
clickedPlayer.classList.add("border-lime-500");
clickedPlayer.classList.add("border-8");
let userAnswer = answers[clickedPlayer.id];
checkButton.addEventListener("click", () => {
checkAnswer(userAnswer, answers);
});
});
}
} 
将答案存储在比侦听器范围更大的变量中。每当提交任何答案时，变量都会被覆盖。然后声明一个单独的
checkButton监听器。如果变量保存的答案不为空，请检查答案。function addClickEvent(answers) { const playerCard = document.querySelectorAll(".player-card"); let userAnswer = null; for (i = 0; i { clickedPlayer = e.target; clickedPlayer.classList.add("border-lime-500"); clickedPlayer.classList.add("border-8"); userAnswer = answers[clickedPlayer.id]; }); } checkButton.addEventListener("click", () => { if(!userAnswer) return alert("Select an answer first!"); checkAnswer(userAnswer, answers); }); }上面的代码不会让前端在单击其他卡片时“取消选择”这些卡片（如果您也想要的话），但这是一个简单的修复。