jquery - 单击子 Div 时仅隐藏 1 个父级

Question

尝试使用 .closest() 时遇到问题。

我的页面上有一个重复的父/子 div，当我单击子项时，我希望隐藏父项。但只有被点击的 child 的 parent 。

现在发生的情况是页面上的所有家长都被隐藏了。

代码如下:HTML

<div class="parent">
    <a href="#" class="child">I'm the child</a>
</div>
<div class="parent">
    <a href="#" class="child">I'm the child</a>
</div>
<div class="parent">
    <a href="#" class="child">I'm the child</a>
</div>

JQuery

$( ".child" ).click(function() {
  $( ".child" ).closest( ".parent" ).fadeOut();
});

你知道我做错了什么吗？提前致谢!

Answer 1

使用 $(this) 引用被单击的元素。

$(".child").click(function() {
    $(this).closest(".parent").fadeOut();
});