Card Flip animation实现后新增多张卡片点击无法翻转问题求助

你当前代码中使用的document.querySelector('.card__inner')仅会匹配到页面中第一个带有card__inner类的元素，因此只有首张卡片成功绑定了点击翻转事件，后续卡片没有绑定任何事件监听，点击时自然没有响应。

方案1：遍历所有卡片绑定事件（适用于静态卡片场景） #

使用document.querySelectorAll选中所有卡片元素，遍历每一张卡片单独绑定点击事件：

// 选中所有卡片内层元素
const cards = document.querySelectorAll('.card__inner');

// 遍历为每张卡片绑定点击事件
cards.forEach(card => {
  card.addEventListener('click', function () {
    // 这里的this指向当前触发点击事件的卡片元素
    this.classList.toggle('is-flipped');
  });
});

方案2：事件委托（适用于卡片动态生成的场景） #

如果你的卡片是后续动态加载到页面中的，直接绑定事件会导致新增的卡片没有监听，可以将事件绑定在卡片的公共父元素上，通过事件冒泡判断触发对象：

// 替换为你所有卡片的公共父元素选择器，比如外层的卡片容器
const cardContainer = document.querySelector('.card-container');

cardContainer.addEventListener('click', e => {
  // 判断点击的是否是卡片内层元素或它的子元素
  const targetCard = e.target.closest('.card__inner');
  if (targetCard) {
    targetCard.classList.toggle('is-flipped');
  }
});

内容的提问来源于stack exchange，提问作者Balauru Razvan Andrei