如何在我的点击功能中只允许选择一个元素？（纯JS）

Question

我正在创建一个测验应用程序，它从 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);
      });
    });
  }
}

Answer 1

将答案存储在比侦听器范围更大的变量中。每当提交任何答案时，变量都会被覆盖。然后声明一个单独的 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);
   });
}

上面的代码不会让前端在单击其他卡片时“取消选择”这些卡片（如果您也想要的话），但这是一个简单的修复。