[英]Toggle current element in jQuery
I have a div filled with 'card' elements:我有一个充满“卡片”元素的 div:
When I click on one, the descriptions for all of them are toggled using jQuery:当我单击一个时,所有这些的描述都使用 jQuery 切换:
I've managed to make it so that once the descriptions appear, if you click on the card, only the individual cards description is toggled back while the rest remain:我设法做到了,一旦描述出现,如果你点击卡片,只有个别卡片的描述会被切换回来,而其余的则保持不变:
How can I also make the descriptions appear for only the individual card being clicked, not all of them at the same time?我怎样才能让描述只显示被点击的单张卡片,而不是同时显示所有卡片?
jQuery: jQuery:
$('.front .description, .front img').click(() => {
$('.back').show('fade');
})
$('.back').click((e) => {
$(e.currentTarget).hide('fade');
})
HTML: 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>
Not sure how to implement e.currentTarget
in this context.不确定如何在这种情况下实现e.currentTarget
。 Any help would be greatly appreciated.任何帮助将不胜感激。
You can use Event.target to find the closest()
card , then find()
the specific .back
您可以使用Event.target找到closest()
卡,然后find()
特定的.back
$('.front .description, .front img').click((e) => {
$(e.target).closest('.card').find('.back').show('fade');
})
OR: You can use this
keyword with normal function syntax (not arrow function ):或者:您可以this
关键字与普通函数语法(不是箭头函数)一起使用:
$('.front .description, .front img').click(function() {
$(this).closest('.card').find('.back').show('fade');
});
try this code试试这个代码
$('.front .description, .front img').click(() => {
$(this).parents('.card:first').find('.back').show('fade'); // this line
})
$('.back').click((e) => {
$(e.currentTarget).hide('fade');
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.