如何使用jquery翻转卡片？

Question

基本上，我需要一些东西像这样，但当我点击下一张卡，前一张应该翻转回来。

我试过这段代码，但效果不太好，你能帮我一下吗？

当我再次点击卡片时，它不会倒转。

​

$(document).ready(function(){
  $('.card-rotating').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('.card-rotating').removeClass('flipped');

    $(this).addClass('flipped');
    $("#"+tab_id).addClass('flipped');
  });
    $('.backrote').click(function(){
      $('.card-rotating').removeClass('flipped');
     });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Grid column -->
<div class="col-lg-4 col-md-12">
  <!-- Rotating card -->
  <div class="card-wrapper">
    <div id="card-3" class="card-rotating effect__click text-center w-100 h-100" data-tab="tab-3">
      <!-- Front Side -->
      <div class="face front">
        <!-- Avatar -->
        <div class="avatar mx-auto white">
          <img src="https://mdbootstrap.com/img/Photos/Avatars/img (8).jpg" class="rounded-circle img-fluid" alt="Third sample avatar image">
        </div>
        <!-- Content -->
        <div class="card-body">
          <h4 class="font-weight-bold mt-1 mb-3">John Doe</h4>
          <p class="font-weight-bold dark-grey-text">Cirencester</p>
          <!-- Triggering button -->
          <a class="rotate-btn grey-text" data-card="card-3">
                                    <i class="fa fa-repeat grey-text"></i> Click here to rotate</a>
        </div>
      </div>
      <!-- Front Side -->
      <!-- Back Side -->
      <div class="face back">
        <!-- Content -->
        <div class="card-body">
          <iframe width="560" height="315" src="https://www.youtube.com/embed/woP_xcmpFrY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
          <!-- Content -->
          <h4 class="font-weight-bold mt-4 mb-2">
            <strong>About me</strong>
          </h4>

          <!-- Triggering button -->
          <a class="rotate-btn backrote grey-text" data-card="card-3">
            <i class="fa fa-repeat grey-text"></i> Click here to rotate back</a>
        </div>
      </div>
      <!-- Back Side -->
    </div>
  </div>
  <!-- Rotating card -->
</div>
<!-- Grid column -->

​

Answer 1

看起来您正在将flipped类添加到当前单击的卡片中。如果当前单击的卡还没有flipped类，这很好，但是如果卡已经有了，则尝试删除该flipped类。像这样的事情应该有效：

if($(this).hasClass("flipped")) {
    $(this).removeClass("flipped");
}
else {
    //the current code inside your click function
}