jquery - 通过卡内按钮制作 3D 变换卡翻转，而不是通过单击整个卡

Question

我有一张带有 3D 变换的引导卡，可以使其翻转。我当前的问题是如何点击翻转。我有一些 jQuery，可以使整个卡片可点击以激活和翻转，但这不是我想要的，因为里面有一个交互式轮播。

我有一个<h3>卡片正面内的元素(靠近底部)，类为 .flip-card-btn我宁愿让人们点击。我有什么办法可以实现这个目标吗？我尝试更改 .querySelector成为flip-card-btn类而不是 #project-card id 甚至其他一些 jquery 片段，但仍然没有运气。将不胜感激帮助解决这个问题。谢谢!

var card = document.querySelector('#project-card');
card.addEventListener('click', function() {
  card.classList.toggle('is-flipped');
});

/*project card styles start*/

.scene {
  width: 810px;
  height: 430px;
  border: ;
  perspective: 1400px;
}

#project-card {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  position: relative;
  border: none;
}

#project-card .card-columns {}

.card.is-flipped {
  transform: rotateY(180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
}

#project-card .card__face--front {
  background: #fff;
  border: 2px solid #001866;
  border-radius: 4px;
  color: #001866;
}

.card__face--back {
  background: #001866;
  color: #fff;
  border: 2px solid #ffd633;
  border-radius: 4px;
  transform: rotateY(180deg);
}


/*project cards container*/

#project-cards-contain {
  max-width: 96%;
  margin: 50px auto 0px 3px;
}

#project-cards-contain .fa {
  color: #001866;
  font-size: 1.5em;
}

#project-cards .card {
  border: none;
}

#project-cards .card-body {
  padding: 0;
}

#project-cards img {
  width: 40%;
  height: 14em;
}

#project-cards p {
  margin-top: 7px;
}

.flip-card-btn {
  font-size: 25px;
  color: #cccccc;
  text-align: right;
  margin-right: 5em;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="scene scene--card card-deck">
  <div id="project-card" class="card">
    <!--web side-->
    <div class="card__face card__face--front">
      <h4 style="text-align:center;">PROJECTS: WEB & DESIGN</h4>
      <div id="project-cards-contain" class="carousel slide" data-ride="carousel">
        <div id="project-cards" class="carousel-inner">
          <div class="carousel-item active">
            <div class="card">
              <img class="card-img-top mx-auto" src="assets/images/profile-image.jpg" alt="Project Card1" />
              <div class="card-body text-center">
                <p>My Profile Webpage</p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="card">
              <img class="card-img-top mx-auto" src="assets/images/profile-image.jpg" alt="Project Card2" />
              <div class="card-body text-center">
                <p>My Profile Webpage</p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="card">
              <img class="card-img-top mx-auto" src="assets/images/profile-image.jpg" alt="Project Card3" />
              <div class="card-body text-center">
                <p>My Profile Webpage</p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="card">
              <img class="card-img-top mx-auto" src="assets/images/profile-image.jpg" alt="Project Card4" />
              <div class="card-body text-center">
                <p>My Profile Webpage</p>
              </div>
            </div>
          </div>
        </div>
        <!-- Controls -->
        <a class="carousel-control-prev" href="#project-cards-contain" role="button" data-slide="prev">
          <span class="fa fa-arrow-left" style="color:#001866;" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#project-cards-contain" role="button" data-slide="next">
          <span class="fa fa-arrow-right" style="color:#001866;" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
      <h3 class="flip-card-btn">FLIP CARD</h3>
    </div>
    <!--woodworking side-->
    <div class="card__face card__face--back">
      back
    </div>
  </div>
</div>

Answer 1

在 JavaScript 代码中，您选择了 #project-card，它是卡片的整个主体。无论您点击卡片主体，点击功能都会起作用。如果您希望单击事件监听器仅在翻转卡按钮/文本上工作，那么您应该选择该元素/类。

这是我对您的 JavaScript 的建议:

var card = document.querySelector('.flip-card-btn');
card.addEventListener('click', function() {
  document.querySelector('#project-card').classList.toggle('is-flipped');
});

var back = document.querySelector('.card__face--back');
  back.addEventListener('click', function() {
  document.querySelector('#project-card').classList.toggle('is-flipped');
}); 

现在，单击“翻转卡片”后，它会翻转您的卡片，但您无法翻转回来。因此，我将 eventListener 添加到卡片背面的“后”文本中，以翻转回之前的位置。

希望对您有帮助!