带有 CSS 和 Jquery 的多面翻转卡片

Question

如果在一页上有一张翻转卡片（多面），我需要一些帮助来创建多个实例。

感谢fiddle by Matt Coughlin，我可以完美地创建一个多面翻转卡片实例

问题是当我想在同一页面上创建第二张和第三张翻转卡片时。

在下面的代码 sn-p 中，左侧的按钮控制两张翻牌。 并且，第一张翻转卡片的内容会显示在两边。

我想我可以为每个实例创建一个函数并完成不同的类，但我希望有一种代码密集度较低的方法。

谢谢

var topCard = 1;
var facingUp = true;

function flipCard(n) {
    if (topCard === n) return;

    // Replace the contents of the current back-face with the contents
    // of the element that should rotate into view.
    var curBackFace = $('.' + (facingUp ? 'face2' : 'face1'));
    var nextContent = $('.store' + n).html(); 
    var nextContent = $('.store li:nth-child(' + n + ')').html(); 
    curBackFace.html(nextContent);

    // Rotate the content
    $('.card').toggleClass('flipped');
    topCard = n;
    facingUp = !facingUp;
}

$('#flip1').on('click', function(){ flipCard(1); });
$('#flip2').on('click', function(){ flipCard(2); });
$('#flip3').on('click', function(){ flipCard(3); });
$('#flip4').on('click', function(){ flipCard(4); });

$(document).ready(function(){
    // Add the appropriate content to the initial "front side"
    var frontFace = $('.face1');
    var frontContent = $('.store li:first-child').html(); 
    frontFace.html(frontContent);
});

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 3em;
  
}
.container {
    position: relative;
    width: 200px;
    height: 260px;
    margin: 0 auto 40px auto;

    -webkit-perspective: 800px;
       -moz-perspective: 800px;
        -ms-perspective: 800px;
         -o-perspective: 800px;
            perspective: 800px;
}
.container .card {
    position: absolute;
    width: 100%;
    height: 100%;

    -webkit-transition: -webkit-transform 1s;
       -moz-transition:    -moz-transform 1s;
        -ms-transition:     -ms-transform 1s;
         -o-transition:      -o-transform 1s;
            transition:         transform 1s;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.container .card .face {
    position: absolute;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
    font-size: 140px;
    font-weight: bold;
    line-height: 260px;
    color: #fff;
    text-align: center;

    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
         -o-backface-visibility: hidden;
            backface-visibility: hidden;
}
.container .card.flipped,
.container .card .face2 {
    -webkit-transform: rotateY(180deg);
       -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
         -o-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
.container .card .face .content1 {background-color: #7ad;}
.container .card .face .content2 {background-color: #7da;}
.container .card .face .content3 {background-color: #d7a;}
.container .card .face .content4 {background-color: #fad997;}

.store {
    display: none;
}
.buttons {
    text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid">

  <div class="box">
    <div class="container">
    <div class="card">
        <div class="face face1"></div>
        <div class="face face2"></div>
    </div>

    <ul class="store">
        <li>
            <div class="content content1">1</div>
        </li>
        <li>
            <div class="content content2">2</div>
        </li>
        <li>
            <div class="content content3">3</div>
        </li>
        <li>
            <div class="content content4">4</div>
        </li>
    </ul>
</div>

<div class="buttons">
    <input type="button" id="flip1" value="Flip 1"/>
    <input type="button" id="flip2" value="Flip 2"/>
    <input type="button" id="flip3" value="Flip 3"/>
    <input type="button" id="flip4" value="Flip 4"/>
</div>

 
</div>
  
  
    <div class="box">
    <div class="container">
    <div class="card">
        <div class="face face1"></div>
        <div class="face face2"></div>
    </div>

    <ul class="store">
        <li>
            <div class="content content1">11</div>
        </li>
        <li>
            <div class="content content2">12</div>
        </li>
        <li>
            <div class="content content3">13</div>
        </li>
        <li>
            <div class="content content4">14</div>
        </li>
    </ul>
</div>

<div class="buttons">
    <input type="button" id="flip11" value="Flip 11"/>
    <input type="button" id="flip12" value="Flip 12"/>
    <input type="button" id="flip13" value="Flip 13"/>
    <input type="button" id="flip14" value="Flip 14"/>
</div>

 
</div>
  
</div>

Answer 1

我稍微修改了你的脚本，但它现在应该可以按你的意愿工作了。

主要问题是当您点击一个按钮时，它不知道要翻转哪张卡片。

演示

function flipCard(n, obj, i) {
  var topCard = obj.attr("data-topCard") || 1;
  var facingUp = obj.attr("data-facingUp") || true;
  if (topCard === n) return;

  // Replace the contents of the current back-face with the contents
  // of the element that should rotate into view.
  var curBackFace = obj.find('.' + (facingUp ? 'face2' : 'face1'));
  var nextContent = obj.find('.store li:nth-child(' + (i + 1) + ')').html();
  curBackFace.html(nextContent);

  // Rotate the content
  obj.find('.card').toggleClass('flipped');
  obj.attr("data-topCard", n)
  obj.attr("data-facingUp", !facingUp)
}

$('.flip').on('click', function() {
  flipCard($(this).val(), $(this).closest(".box"), $(this).index());
});

$(document).ready(function() {
  // Add the appropriate content to the initial "front side"
  $(".box").each(function() {
    var frontFace = $(this).find('.face1');
    var frontContent = $(this).find('.store li:first-child').html();
    frontFace.html(frontContent);
  });
});

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 3em;
}

.container {
  position: relative;
  width: 200px;
  height: 260px;
  margin: 0 auto 40px auto;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -ms-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}

.container .card {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -ms-transition: -ms-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.container .card .face {
  position: absolute;
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  font-size: 140px;
  font-weight: bold;
  line-height: 260px;
  color: #fff;
  text-align: center;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.container .card.flipped,
.container .card .face2 {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.container .card .face .content1 {
  background-color: #7ad;
}

.container .card .face .content2 {
  background-color: #7da;
}

.container .card .face .content3 {
  background-color: #d7a;
}

.container .card .face .content4 {
  background-color: #fad997;
}

.store {
  display: none;
}

.buttons {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid">

  <div class="box">
    <div class="container">
      <div class="card">
        <div class="face face1"></div>
        <div class="face face2"></div>
      </div>

      <ul class="store">
        <li>
          <div class="content content1">1</div>
        </li>
        <li>
          <div class="content content2">2</div>
        </li>
        <li>
          <div class="content content3">3</div>
        </li>
        <li>
          <div class="content content4">4</div>
        </li>
      </ul>
    </div>

    <div class="buttons">
      <input type="button" class="flip" value="1" />
      <input type="button" class="flip" value="2" />
      <input type="button" class="flip" value="3" />
      <input type="button" class="flip" value="4" />
    </div>


  </div>


  <div class="box">
    <div class="container">
      <div class="card">
        <div class="face face1"></div>
        <div class="face face2"></div>
      </div>

      <ul class="store">
        <li>
          <div class="content content1">11</div>
        </li>
        <li>
          <div class="content content2">12</div>
        </li>
        <li>
          <div class="content content3">13</div>
        </li>
        <li>
          <div class="content content4">14</div>
        </li>
      </ul>
    </div>

    <div class="buttons">
      <input type="button" class="flip" value="11" />
      <input type="button" class="flip" value="12" />
      <input type="button" class="flip" value="13" />
      <input type="button" class="flip" value="14" />
    </div>


  </div>

</div>