jQuery翻转:为什么只有我的文本翻转，而不是.card

jQuery Flip: Why is only my text turning and not .card?

本文关键字：翻转 card 文本 我的 为什么 jQuery      更新时间：2023-09-26

我正在使用jQuery翻转插件。我想让几张牌在彼此的上面当用户点击一张牌时，它应该翻转并显示背面。但是现在只有文字在翻转，而文字后面的卡片没有。我以前设法让它工作，但我不得不为front和back上课。

$(function() {
  $(".card").flip({
    axis: "y",
    reverse: "false",
    trigger: "click",
    speed: 700,
  });
});
.card {
  position: absolute;
  width: 400px;
  height: 248px;
  margin: 2px;
  background-color: #F3ECE2;
  border: 5px blue solid;
  padding: 10px;
  border-radius: 25px;
}
#card-1 {
  left: 0px;
  top: 0px;
  z-index: 1;
}
#card-2 {
  left: 10px;
  top: -238px;
  z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js"></script>
<div class="card" id="card-1">
  <div>
    Front1
  </div>
  <div>
    Back1
  </div>
</div>
<div class="card" id="card-2">
  <div>
    Front2
  </div>
  <div>
    Back2"
  </div>
</div>

根据我对网站的了解，您需要在相应的div类中添加front和back类，如下图所示:

$(function() {
  $(".card").flip({
    axis: "y",
    reverse: "false",
    trigger: "click",
    speed: 700,
  });
});
.card{
  width:200px;
  height:100px;
  position:relative;
}
.front,
.back {
  background-color: #F3ECE2;
  border: 5px blue solid;
  padding: 10px;
  border-radius: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js"></script>
<div class="card" id="card-1">
  <div class="front">
    Front1
  </div>
  <div class="back">
    Back1
  </div>
</div>
<div class="card" id="card-2">
  <div class="front">
    Front2
  </div>
  <div class="back">
    Back2
  </div>
</div>

相关文章：