Javascript 在jQuery中切换当前元素

我有一个充满“卡片”元素的div：

当我单击其中一个时，将使用jQuery切换它们的描述：

我已经设法使它，一旦描述出现，如果你点击卡，只有个别卡的描述切换回来，而其余的仍然：

我怎样才能使描述只显示被点击的单个卡片，而不是同时显示所有卡片

jQuery：

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

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

HTML:

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

请尝试此代码

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

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

试试这个代码

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

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

你可以用找到的卡，然后具体。回来

或者：您可以将关键字与普通函数语法一起使用，而不是使用箭头函数：

你可以用找到的卡，然后具体。回来

或者：您可以将关键字与普通函数语法一起使用，而不是使用箭头函数：

$this not$'this'$this not$'this'

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

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