如何在Vanilla JS点击函数中实现单选功能？

问题背景 #

开发一款从API拉取数据的测验应用，会根据随机选取的题目加载数量不等的答案选项（以CSS卡片样式呈现的Player Cards）。当前功能允许用户选中所有卡片，所有被点击的卡片都会添加高亮CSS类，且校验时会传递所有选中的答案数据。需要修改为单选模式：用户可切换选择，但始终仅能选中一个答案，校验仅基于该选中答案执行。

核心改动思路 #

• 每次点击卡片时，先移除所有卡片的选中样式，再给当前点击的卡片添加选中样式
• 将用户选中的答案存储在外部变量，避免每次点击都重复绑定校验事件
• 校验按钮仅绑定一次事件，读取全局存储的选中答案执行校验

修改后的代码 #

// 全局存储选中的答案，避免重复绑定事件导致的多次触发问题
let selectedAnswer = null;

function addClickEvent(answers) {
  const playerCard = document.querySelectorAll(".player-card");
  const checkButton = document.querySelector(".check-button"); // 确保正确获取校验按钮

  // 批量给卡片绑定点击事件
  playerCard.forEach((card, index) => {
    card.setAttribute("id", index);
    card.addEventListener("click", (e) => {
      // 1. 清除所有卡片的选中状态
      playerCard.forEach(item => {
        item.classList.remove("border-lime-500", "border-8");
      });
      // 2. 给当前点击的卡片添加选中样式
      const clickedCard = e.currentTarget; // 避免事件冒泡导致的目标错误
      clickedCard.classList.add("border-lime-500", "border-8");
      // 3. 记录当前选中的答案
      selectedAnswer = answers[clickedCard.id];
    });
  });

  // 4. 仅绑定一次校验按钮的点击事件
  checkButton.addEventListener("click", () => {
    if (selectedAnswer) {
      checkAnswer(selectedAnswer, answers);
    } else {
      alert("请先选择一个答案"); // 可选：增加未选择时的提示
    }
  });
}

关键改动说明 #

• 单选逻辑实现：每次点击卡片时先重置所有卡片的选中状态，再标记当前卡片，确保始终只有一个选中项
• 事件绑定优化：原代码每次点击卡片都会给校验按钮新增绑定事件，导致点击校验时多次触发checkAnswer，修改后仅绑定一次
• 事件目标修正：使用e.currentTarget代替e.target，避免点击卡片内部子元素时触发错误的目标对象
• 用户体验优化：增加未选择答案时的提示，避免无意义的校验触发

内容的提问来源于stack exchange，提问作者OrcaDrive