改善不同ID的JS功能（FLIP CADRS）

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

想要改进此问题吗？添加详细信息并通过

闭合 2年前。

Answer 1

我对HTML的结构有一些疑问，但是出于您的问题，可能是一个优雅的解决方案。

用单个类识别您的按钮，而不是不同的ID，

<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 id="flip-card1">
            <div class="flip-card-front1">
              <p>front</p>
              <button class="flip-card-btn">back</button>
            </div>
            <div class="flip-card-back1">
              <p>Back</p>
              <button class="flip-card-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 id="flip-card2">
            <div class="flip-card-front2">
              <p>front</p>
              <button class="flip-card-btn">back</button>
            </div>
            <div class="flip-card-back2">
              <p>Back</p>
              <button class="flip-card-btn">front</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

显然将您的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-card1, #flip-card2 {
  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-card-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-card1 .flip-card-front1, #flip-card1 .flip-card-back1, #flip-card2 .flip-card-front2, #flip-card2 .flip-card-back2{
  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-card1 .flip-card-front1, #flip-card2 .flip-card-front2 {
    background: transparent;
}
#flip-card1 .flip-card-back1, #flip-card2 .flip-card-back2 {
    background: transparent;
    -o-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
#flip-card1 .flip-card-front1 p, #flip-card1 .flip-card-back1 p, #flip-card2 .flip-card-front2 p, #flip-card2 .flip-card-back2 p {
  color: white;
  display: block;
  position: relative;
  font-size: 400%;
  text-align: left;
  font-family: inherit;
}

并最终使用简单的JavaScript代码来翻转卡

document.addEventListener('DOMContentLoaded', function() {
  const list = document.getElementsByClassName('flip-card-btn');
  [].forEach.call(list, function(e) {
    e.onclick = function() {
      document.getElementById(this.parentNode.parentNode.id).classList.toggle('do-flip');
    }
  });
});

检查这个样本