Question

基本上我需要一些like this，但是当我单击下一张卡片时，上一张应该向后翻转。

我尝试使用此代码，但效果不佳，您能帮我吗？

当我再次单击该卡时，它不会向后翻转。

$(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 }

如何用jQuery翻转卡？

1 个答案: