Переключить текущий элемент в jQuery

Question

У меня есть div, заполненный элементами 'card':

Когда я нажимаю на одну, описания для всех из них переключаются с помощью 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() спецификация c .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');
});

Answer 2

попробуйте этот код

$('.front .description, .front img').click(() => {
    $(this).parents('.card:first').find('.back').show('fade'); // this line
  })

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