支持多ID的JS翻转卡片函数优化方法咨询

核心优化方向是彻底移除硬编码ID逐元素绑定的逻辑，用通用类名+事件委托+DOM关联查找的方案实现，后续不管新增多少张翻转卡片，都不需要重复编写JS、CSS绑定逻辑。

改造原则 #

• 移除所有带数字后缀的ID、类名（如flip-card1、flip-card-front1），全部替换为语义化通用类名，不需要给每个卡片、按钮设置唯一ID
• 用事件委托统一绑定所有翻转按钮的点击事件，不用逐一枚举DOM元素绑定
• 点击按钮时，通过DOM节点的层级关系向上查找当前按钮所属的卡片容器，直接操作对应容器的类名实现翻转，不会干扰其他卡片
• CSS同步替换所有绑定ID、带序号类的选择器为通用类选择器，新增卡片不需要追加CSS规则
• 同步修复原HTML代码中标签未闭合的语法错误

具体改造代码 #

1. HTML结构调整 #

所有卡片复用同一套类名规则，后续新增卡片直接复制.flip-card-3D-wrapper整块结构即可：

<div class="w-90 col-md-12 p-lg-5">
  <div class="card-group">
    <div class="card border-0" style="background-color: transparent;">
      <div class="card-body">
        <div class="flip-card-3D-wrapper">
          <div class="flip-card">
            <div class="flip-card-front">
              <p>front</p><button class="flip-btn">back</button>
            </div>
            <div class="flip-card-back">
              <p>Back</p>
              <button class="flip-btn">front</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card border-0" style="background-color: transparent;">
      <div class="card-body" style="border-left: solid; border-right: solid">
        <div class="flip-card-3D-wrapper">
          <div class="flip-card">
            <div class="flip-card-front">
              <p>front</p><button class="flip-btn">back</button>
            </div>
            <div class="flip-card-back">
              <p>Back</p>
              <button class="flip-btn">front</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第3-10张卡片直接复制上方flip-card-3D-wrapper结构即可，无需修改JS/CSS -->
  </div>
</div>

2. CSS调整 #

删除所有带序号的冗余选择器，全部用通用类匹配：

.flip-card-3D-wrapper {
  width: 55vw;
  height: 50vh;
  max-width: 300px;
  position: relative;
  -o-perspective: 900px;
  -webkit-perspective: 900px;
  -ms-perspective: 900px;
  perspective: 900px;
  margin: auto;
}

.flip-card {
  width: 100%;
  height: 100%;
  text-align: left;
  position: relative;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -o-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.do-flip {
  -o-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.flip-btn {
  background: transparent;
  font-size: 14pt;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
  border: 0;
  border-top: 3px solid white;
}

.flip-card-front,
.flip-card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  -o-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 2;
  -webkit-box-shadow: 5px 6px 32px 2px rgba(133, 133, 133, 0.71);
  -moz-box-shadow: 5px 6px 32px 2px rgba(133, 133, 133, 0.71);
  box-shadow: 5px 6px 32px 2px rgba(133, 133, 133, 0.71);
}

.flip-card-front {
  background: transparent;
}

.flip-card-back {
  background: transparent;
  -o-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-card-front p,
.flip-card-back p {
  color: white;
  display: block;
  position: relative;
  font-size: 400%;
  text-align: left;
  font-family: inherit;
}

3. JS逻辑优化 #

全量逻辑只需要绑定一次事件，自动适配所有现有和后续新增的卡片：

document.addEventListener('DOMContentLoaded', function() {
  // 事件绑定在卡片组父容器上，比绑定在document上性能更优
  document.querySelector('.card-group').addEventListener('click', function(e) {
    // 只响应翻转按钮的点击
    if (e.target.classList.contains('flip-btn')) {
      // 向上查找当前按钮所属的翻转卡片容器
      const currentCard = e.target.closest('.flip-card');
      // 切换翻转状态
      currentCard.classList.toggle('do-flip');
    }
  })
});

方案优势 #

• 维护成本极低：新增卡片只需要复制HTML结构，不需要修改JS和CSS代码
• 性能更好：事件委托的方式比逐个元素绑定事件占用内存更少，即使放置几十张卡片也不会有性能问题
• 容错性更高：不会出现ID冲突、事件漏绑的问题
• 代码量相比原硬编码方案缩减70%以上

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