Question

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

单击一张卡片时，我希望卡片的背面显示为叠加，如Bootstraps模式或等效卡片。但是当卡片被点击（或触摸）时，它应该翻转，显示前面与单击的图像相同以触发模态。它应该能够无限次地前后翻转。单击模态外部或关闭按钮，关闭模态并返回到卡座。

我可以在图像上进行卡片翻转。而且我能够触发具有动态内容的模态。但我无法弄清楚的是如何一起做这个，这样我就不必为每张卡创建一个单独的模态。

我已经把头发拉过这个问题好几天了，我真的无法理解如何做到这一点。我的javascript技能非常有限，我无法找到任何插件或代码示例来帮助我（我尝试了很多选项）。

我的网格显示在代码段中。没有包含数据目标，模块或javascripts，因为我还没有发现任何有效的东西。

有什么想法吗？

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(https://i.stack.imgur.com/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>

Answer 2

将有害生物代码复制到单个文件中并检查您的本地文件是否会运行。完善。以下是现代的做法。您可以参考this link获取有关动态创建模态的方式的更多详细信息。

有了这个，我也使用了外部的js来翻转图像参考，你会得到here。

＆＃13;

$('.flip-card').flip();


function openModal(front_image, back_image) {
  var message = $('#modal_1');
  BootstrapDialog.show({
    message: $('#modal_1'),
    onshown: function() {
      $('.front img').attr('src', front_image);
      $('.back img').attr('src', back_image);
    },
    onhide: function(dialogRef) {
      $('#hidden-div').append(message);
    },
  });
}

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>

<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>

<button type="button" class="btn btn-primary" onclick="openModal('http://fillmurray.com/200/200','http://fillmurray.com/600/600')">Open modal</button>


<div id="hidden-div" style="display: none">
  <div class="container-fluid" id="modal_1">
    <div class="row">
      <div class="col-sm-3 col-xs-6">
        <div class="flip-card" ontouchstart="this.classList.toggle('hover');" style="height : 300px;">
          <div class="front front-side" style="">
            <img src="" alt="" style="width : 100%; height: 100%">
          </div>
          <div class="back back-side" style="background-color : blue">
            <img src="" alt="" style="width : 100%; height: 100%">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

使用动态导入的图像

2 个答案: