按钮触发卡片翻转功能代码复用后仅单个模块生效问题咨询

问题原因 #

你遇到的问题核心是代码中使用了全局唯一ID标识卡片和按钮，HTML规范要求同一页面内ID不可重复，重复ID时getElementById仅会匹配页面中第一个对应ID的元素，因此多模块复用时只有第一个模块的翻转功能可触发。

相关效果截图：

修复方案 #

1. 修改HTML结构 #

将所有重复ID替换为类名，单个卡片的结构调整为如下格式，复用多个卡片时不需要修改类名，直接复制即可：

<div class="flip-card">
  <div class="flip-card-front">
    <div class="cropme" style="width: 350px; height: 400px;"></div>
    <button class="flip-card-btn-turn-to-back">Add Video</button>
    <textarea name="form_message" class="form-control required border-r-none ht-gallery-new" rows="5" placeholder="Add Description" aria-required="true"></textarea>
  </div>
  <div class="flip-card-back">
    <div class="inner">
      <div class="description">
        <p><strong>Note:</strong> 点击此处查看如何获取嵌入视频地址</p>
        <input type="text" required="" placeholder="Paste Embedded Video Url Here" name="gmap" class="form-control allow_only_alphabet space video-url-new">
        <textarea name="form_message" class="form-control required border-r-none add-des-new" rows="5" placeholder="Add Description" aria-required="true"></textarea>
      </div>
    </div>
    <img src="images/return-btn.png" class="flip-card-btn-turn-to-front return-btn-bg">
  </div>
</div>

2. 调整CSS选择器 #

将原CSS中所有ID选择器（#开头）替换为类选择器（.开头），修改后代码如下：

.flip-card-3D-wrapper {
  position: relative;
  -o-perspective: 900px;
  -webkit-perspective: 900px;
  -ms-perspective: 900px;
  perspective: 900px;
  margin: 0 auto;
}
.flip-card {
  width: 100%;
  height: 400px;
  text-align: center;
  position: absolute;
  -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-card-btn-turn-to-back {
  position: absolute;
  top: 46%;
  right: 29%;
  width: 145px;
  height: 46px;
  background: white;
  cursor: pointer;
  visibility: hidden;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  padding: 0;
  border-radius: 50px;
  color: #000;
}
.flip-card-btn-turn-to-front {
  position: absolute;
  top: 2%;
  left: 2%;
  width: 40px;
  height: 40px;
  background: white;
  cursor: pointer;
  visibility: hidden;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: .7em;
  padding: 0;
  border: 1px solid #00666a;
  border-radius: 50px;
}

.flip-card .flip-card-front, .flip-card .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;
}
.flip-card .flip-card-front {
    background: #1fa5ad;
}
.flip-card .flip-card-back {
    background: #00666a;
    -o-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
    width: 350px;
    height: 400px;
    right: 0%;
}
.flip-card .flip-card-front p, .flip-card .flip-card-back p {
  color: #fff;
  display: block;
  position: absolute;
  width: 80%;
  left:8%;
  font-size:14px;
  font-family: 'Open Sans', sans-serif;
  margin-top: -167px;
  padding: 20px!important;
  transform: translateX(0px);
}
.flip-card .flip-card-front p, .flip-card .flip-card-back p a{
  color: #ffc20e;
  text-decoration: none;
}

3. 重写翻转逻辑JS #

改为遍历所有卡片分别绑定事件，不再依赖ID选择器：

// Init Simple Cropper
$('.cropme').simpleCropper();

$('#portrait').hide();
$('.switch').click(function (){
    $(this).text("Switch to "+($('#portrait').is(":visible") ? "Portrait" : "Landscape"));
  $('#portrait').toggle();
  $('#landscape').toggle();
});

document.addEventListener('DOMContentLoaded', function(event) {
  // 遍历所有卡片
  document.querySelectorAll('.flip-card').forEach(card => {
    // 获取当前卡片内的翻转按钮
    const btnToBack = card.querySelector('.flip-card-btn-turn-to-back');
    const btnToFront = card.querySelector('.flip-card-btn-turn-to-front');
    // 设置按钮可见
    btnToBack.style.visibility = 'visible';
    btnToFront.style.visibility = 'visible';
    // 绑定翻到背面事件
    btnToBack.onclick = function() {
      card.classList.toggle('do-flip');
    };
    // 绑定翻到正面事件
    btnToFront.onclick = function() {
      card.classList.toggle('do-flip');
    };
  })
});

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