记忆游戏中卡牌翻转动画失效：仅单张卡牌可翻转问题求助

你的问题根源在于对getElementsByClassName的返回值理解有误，以及事件绑定和元素操作的方式不对，具体问题和修正方案如下：

问题分析 #

1. getElementsByClassName返回元素集合：这个方法返回的是包含所有匹配类名元素的HTMLCollection，不是单个元素。你直接用front.addEventListener或者front.style只会作用于集合里的第一个元素，所以只有第一张卡牌有反应。
2. 事件绑定错误：你写的front.addEventListener("click", rotate())是直接调用了rotate函数，页面加载时就会执行，而不是点击卡牌时触发，正确的写法应该是传函数引用rotate（不带括号）。
3. 函数内操作集合而非单个元素：rotate和changeimage里直接操作整个集合的style和src，同样只会影响第一个元素，应该针对当前点击的卡牌进行操作。

修正后的代码 #

JavaScript 代码 #

// 获取所有卡牌的front元素
const fronts = document.getElementsByClassName("front");

// 遍历每个front元素，绑定点击事件
for (let i = 0; i < fronts.length; i++) {
  fronts[i].addEventListener("click", function() {
    // 获取当前点击的卡牌对应的back和front-img元素
    const back = this.parentElement.querySelector(".back");
    const frontImg = this.querySelector(".front-img");
    
    // 执行翻转动画
    rotate(this, back);
    // 执行图片切换
    changeImage(frontImg);
  });
}

function rotate(frontEl, backEl) {
  frontEl.style.animation = "spinning 1 2s linear";
  backEl.style.animation = "spinning 1 2s linear";
}

function changeImage(imgEl) {
  setTimeout(() => {
    imgEl.src = "Bounty1.png";
  }, 2000);
}

关键修改说明 #

• 遍历所有front元素，给每个元素单独绑定点击事件，确保每张卡牌都能响应点击。
• 在点击事件里，通过this获取当前被点击的front元素，再通过parentElement和querySelector找到同一张卡牌里的back和front-img，保证操作的是当前卡牌的元素。
• 事件绑定不再直接调用函数，而是传递函数引用（这里用了匿名函数包裹，方便传递当前元素）。
• 动画函数rotate和图片切换函数changeImage接收具体的元素参数，针对单个元素操作。

额外提示 #

• 建议使用querySelectorAll替代getElementsByClassName，它返回的是NodeList，支持forEach遍历，写法更简洁：

  document.querySelectorAll(".front").forEach(front => {
    front.addEventListener("click", function() {
      // 逻辑和上面一致
    });
  });
  

• 动画完成后，可以考虑移除animation属性，或者添加animationend事件监听，避免重复点击时动画异常。

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