javascript - 简单的 JQuery 闪存卡

Question

我可以帮助构建 jQuery 闪存卡。

现在每张闪存卡都有一个正面 div 和背面 div。当用户点击正面时，它应该隐藏正面并显示背面。现在的问题是单击一下即可显示所有方面。

当用户点击一张卡片时，它会显示所有其他卡片(不好)。
我究竟做错了什么？

$(".flashcard-FRONT").click(function() {
  $(this).css("display", "none");
  $(".flashcard-BACK").css("display", "inline-block");
});

.holder {
  text-align: center;
}

.flashcard-FRONT {
  background: #2b2b2b;
  width: 200px;
  height: 200px;
  display: inline-block;
  padding: 30px;
  color: #FFF;
  text-align: center;
  margin: 0px 5px;
  border: 7px #FFF solid;
  box-shadow: 1px 1px 4px 0px #00000042;
}

.flashcard-BACK {
  background: #FFF;
  width: 200px;
  height: 200px;
  display: none;
  padding: 30px;
  color: #2b2b2b;
  text-align: center;
  margin: 0px 5px;
  border: 7px #2b2b2b solid;
  box-shadow: 1px 1px 4px 0px #00000042;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="holder">

  <!-- START: FLASH CARD 1 -->
  <!-- FRONT SIDE -->
  <div class="flashcard-FRONT">
    <h3>Hiring Decisions</h3>
  </div>
  <!-- BACK SIDE -->
  <div class="flashcard-BACK">
    <h3>Hiring Decisions</h3>
    <p>Use interview resources to make the best hiring decisions and build diverse teams.</p>
  </div>
  <!-- END: FLASH CARD 1 -->


  <!-- START: FLASH CARD 2 -->
  <!-- FRONT SIDE -->
  <div class="flashcard-FRONT">
    <h3>Hiring Decisions</h3>
  </div>
  <!-- BACK SIDE -->
  <div class="flashcard-BACK">
    <h3>Hiring Decisions</h3>
    <p>Use interview resources to make the best hiring decisions and build diverse teams.</p>
  </div>
  <!-- END: FLASH CARD 2 -->

  <!-- START: FLASH CARD 3 -->
  <!-- FRONT SIDE -->
  <div class="flashcard-FRONT">
    <h3>Hiring Decisions</h3>
  </div>
  <!-- BACK SIDE -->
  <div class="flashcard-BACK">
    <h3>Hiring Decisions</h3>
    <p>Use interview resources to make the best hiring decisions and build diverse teams.</p>
  </div>
  <!-- END: FLASH CARD 3 -->

</div>
<!-- end holder -->

查看CodePen

Answer 1

您的点击事件处理程序正在选择所有具有“flashcard-BACK”类的 div。您需要将其更改为仅选择所需的那个。使用您当前的标记，您可以通过替换来做到这一点:

$(".flashcard-BACK").css("display", "inline-block");

与

$(this).next().show();

但是，您可以考虑将每张卡片的正面和背面都包装在父 div 中，如下所示:

<div class="card">
  <div class="front">...</div>
  <div class="back">...</div>
</div>

然后将您的 jquery 处理程序更改为:

$('.front', '.card').on('click', function() {
  $(this).hide();
  $(this).siblings('.back').show();
});

$('.back', '.card').on('click', function() {
  $(this).hide();
  $(this).siblings('.front').show();
});