javascript - 使用动态导入的图像在 Bootstrap 模态内翻转卡片

Question

我正在制作一种纸牌游戏。我使用 Bootstrap 3 作为我的框架，在网格中放置一副卡片，每张卡片在它们自己的列中。

单击卡片时，我希望卡片背面朝上显示为覆盖层，如 Bootstraps 模态或同等内容。但是当单击(或触摸)卡片时，它应该翻转，显示与被单击以触发模态的图像相同的正面。它应该能够无限次地前后翻转。单击模态框外或关闭按钮，关闭模态框并返回到面板。

我可以在图像上翻转卡片。而且我能够触发具有动态内容的模态。但我想不通的是如何一起做这件事，这样我就不必为每张卡片创建一个单独的模式。

几天来我一直在为这个问题纠结，我真的无法理解如何做到这一点。我的 javascript 技能非常有限，我找不到任何插件或代码示例来帮助我(我尝试了很多选项)。

我的网格显示在片段中。但是没有包含数据目标、模块或 javascript，因为我还没有找到任何有用的东西。

有什么想法吗？

main {
  .container-fluid;
  .text-center;
  background: none;
  header {
    .container-fluid;
    .text-center;
    padding: 50px;
    h1 {
      font-weight: @font-weight-heading;
    }
  }
  .cardColumns {
    .make-row();
    .cCard {
      .make-xs-column(4);
      .make-sm-column(3);
      .make-md-column(2);
      padding: 10px;
      img {
        width: 100%;
        height: auto;
        .img-rounded;
        modal-body-shadow: 0 4px 8px 0 #000;
        transition: 0.3s;
      }
      img:hover {
        modal-body-shadow: 0 8px 16px 0 #000;
      }
    }
  }
}

<main>
  <div class="cardColumns">
    <div class="cCard">
      <a href="#">
        <img src="img/card.jpg" alt="Perspiciatis">
      </a>
    </div>
    <div class="cCard">
      <a href="#">
        <img src="img/card.jpg" alt="Perspiciatis">
      </a>
    </div>
    <div class="cCard">
      <a href="#">
        <img src="img/card.jpg" alt="Perspiciatis">
      </a>
    </div>
    <div class="cCard">
      <a href="#">
        <img src="img/card.jpg" alt="Perspiciatis">
      </a>
    </div>
    <div class="cCard">
      <a href="#">
        <img src="img/card.jpg" alt="Perspiciatis">
      </a>
    </div>
    <div class="cCard">
      <a href="#">
        <img src="img/card.jpg" alt="Perspiciatis">
      </a>
    </div>
    <div class="cCard">
      <a href="#">
        <img src="img/card.jpg" alt="Perspiciatis">
      </a>
    </div>
    <div class="cCard">
      <a href="#">
        <img src="img/card.jpg" alt="Perspiciatis">
      </a>
    </div>
    <div class="cCard">
      <a href="#">
        <img src="img/card.jpg" alt="Perspiciatis">
      </a>
    </div>
    <div class="cCard">
      <a href="#">
        <img src="img/card.jpg" alt="Perspiciatis">
      </a>
    </div>
    <div class="cCard">
      <a href="#">
        <img src="img/card.jpg" alt="Perspiciatis">
      </a>
    </div>
    <div class="cCard">
      <a href="#">
        <img src="img/card.jpg" alt="Perspiciatis">
      </a>
    </div>
    <div class="cCard">
      <a href="#">
        <img src="img/card.jpg" alt="Perspiciatis">
      </a>
    </div>
    <div class="cCard">
      <a href="#">
        <img src="img/card.jpg" alt="Perspiciatis">
      </a>
    </div>
  </div>
</main>

Answer 1

这基本上只是改变了旋转中途的背景图像。

$(document).ready(function() {
  initListeners();
});

function initListeners() {
  $(".container").off();
  $(".container").on("click",function() {
    $(".container").removeClass("toggle")
    $(this).addClass("toggle");
  });
}

/*var Cards;
setTimeout(function() {
  Cards = document.querySelectorAll(".container");
  for (let i = 0; i < (e = Cards.length); i++)
    Cards[i].addEventListener("click", function(elem) {
      for (let i = 0; i < (e = Cards.length); i++)
        Cards[i].classList.remove('toggle');
      elem.target.parentElement.classList.add('toggle');
    });
}, 1);*/

.container {
  perspective: 1000px;
  display: inline-block;
  position: relative;
}

.card {
  margin: 5px;
  width: 105px;
  height: 150px;
  background: #000;
  transition: transform .35s linear;
  transform: rotateX(180deg);
  transform-style: preserve-3d;
}

.card::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/image/gcRWf.png) center center;
  background-size: cover!important;
  transition: background 0.01s linear;
  transition-delay: 0.175s;
}

.container.toggle .card {
  transform: rotateX(0deg);
}

.container.toggle .card::after {
  background: url(https://s-media-cache-ak0.pinimg.com/736x/f4/e3/97/f4e397ef5e0a4cd7cdbf30e65aa149c0.jpg) center center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="card"></div>
</div>
<div class="container">
  <div class="card"></div>
</div>
<div class="container">
  <div class="card"></div>
</div>
<div class="container">
  <div class="card"></div>
</div>
<div class="container">
  <div class="card"></div>
</div>