javascript - 切换 jQuery 中的当前元素

Question

我有一个充满“card”元素的 div:

当我单击其中一个时，所有它们的描述都会使用 jQuery 进行切换:

我已经设法做到，一旦描述出现，如果您单击该卡片，则只有单个卡片描述会切换回来，而其余的则保留:

我怎样才能使描述仅出现针对被单击的单个卡片，而不是同时显示所有卡片？

jQuery:

  $('.front .description, .front img').click(() => {
    $('.back').show('fade');
  })

  $('.back').click((e) => {
    $(e.currentTarget).hide('fade');
  })

HTML:

<div class="card">
  <div class="front">
    <img src="../img/card.png" alt="magic the gathering playing card" />
    <div class="description">
      <p>Black Lotus</p>
      <p>£1000</p>
    </div>
    <button>Add to cart</button>
  </div>
  <div class="back">
    <p>
      Necessitatibus sint earum temporibus consequatur quasi cum magnam aut
      sequi voluptate natus perferendis, illo ipsum voluptatem, saepe modi,
      ullam omnis consectetur eos sed iure non. Voluptate, molestias.
    </p>
  </div>
</div>

不确定如何在此上下文中实现e.currentTarget。任何帮助将不胜感激。

Answer 1

您可以使用Event.target找到 closest() 卡，然后 find()具体的.back

$('.front .description, .front img').click((e) => {
  $(e.target).closest('.card').find('.back').show('fade');
})

或:您可以使用this具有正常函数语法的关键字(不是箭头函数):

$('.front .description, .front img').click(function() {
  $(this).closest('.card').find('.back').show('fade');
});