点击新卡片时如何取消旧卡片的card-clicked类？

当前点击卡片时，卡片边框会从灰色变为白色（添加card-clicked类），但点击新卡片后，之前选中的卡片边框仍保持白色。需要实现点击新卡片时，自动移除旧卡片的card-clicked类，且希望用简便的方式实现。

现有代码如下：

var numberOfCards = document.querySelectorAll(".card").length;

for (var i = 0; i < numberOfCards; i++) {

  document.querySelectorAll(".card")[i].addEventListener("click", function() {

    var currentCard = this.querySelector(".card .card-body .card-title").innerHTML;

    switch (currentCard) {
      case "Temperature":
        this.classList.toggle("card-clicked");
        break;

      case "pH":
        this.classList.toggle("card-clicked");
        break;

      case "Water Change":
        this.classList.toggle("card-clicked");
        break;

      case "Lighting":
        this.classList.toggle("card-clicked");
        break;

     default:
    }
  });
};

曾尝试在原switch前添加以下代码移除所有card-clicked类，但导致原switch无法执行：

switch (currentCard) {
  case "Temperature":
  case "pH":
  case "Water Change":
  case "Lightning":
    this.classList.remove("card-clicked");
    break;
default:
}

不需要依赖卡片标题做判断，直接在点击事件里执行两步操作就能实现单选效果，代码简洁高效：

// 提前缓存所有卡片元素，避免重复查询DOM
const cards = document.querySelectorAll(".card");

cards.forEach(card => {
  card.addEventListener("click", function() {
    // 1. 移除所有卡片的选中类
    cards.forEach(item => item.classList.remove("card-clicked"));
    // 2. 给当前点击的卡片添加选中类
    this.classList.add("card-clicked");
  });
});

问题分析 #

你之前的尝试逻辑错误：那段代码只移除了当前点击卡片的card-clicked类，完全没处理其他已选中的卡片，而且和后面的toggle操作冲突——先移除再切换，等于没生效，自然达不到单选效果。

额外优化说明 #

• 用forEach替代传统for循环，代码更简洁易读
• 提前缓存cards变量，避免每次点击都重新查询DOM，提升页面性能
• 不再依赖卡片标题判断，无论卡片内容如何变化，都能稳定实现单选效果，扩展性更强

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