javascript - 获取最近 Div 的 ID 不工作两次

Question

我正在处理一个关闭按钮，并且正在使用“onclick”。当用户按下按钮时，我尝试将父 ID 的显示值设置为“无”。就像下面这样。

function displayNone() {
    var id= $('.btnClose').closest('div').attr('id');
    $('#'+id).css('display','none');
}


<div class="popup" id="dc-16-decision">
    <a href="#" onclick="displayNone();" class="btnClose">X</a>

</div>

<div class="popup" id="dc-16-implementation">
    <a href="#" onclick="displayNone();" class="btnClose">X</a>
</div>

我能够通过第一个链接使其工作一次，但之后的任何内容都不起作用。因此，我对 JsFiddle 进行了测试，发现当我单击第二个链接时，它仍然返回第一个链接的父 ID，而不是第二个链接的父 ID。我对此很陌生，不确定我做错了什么。我尝试使用 $(this) 而不是 $('.btnClose') 但它返回“未定义”。

http://jsfiddle.net/5x7g96hu/

<script>
    function test() {
     var name = $('.btnClose').closest('div').attr('id');
    console.log(name);
}
</script>

<div class="popup" id="dc-16-decision">
    <a href="#" onclick="test();" class="btnClose">X</a>

</div>

<div class="popup" id="dc-16-implementation">
    <a href="#" onclick="test();" class="btnClose">X</a>
</div>

Answer 1

您需要使用关键字 this 将点击元素上下文传递给点击处理程序，以定位当前点击的元素:

脚本:

<script>
function test(obj) {
  var name = $(obj).closest('div').attr('id');
  console.log(name);
}
</script>

HTML:

 <div class="popup" id="dc-16-decision">
  <a href="#" onclick="test(this);" class="btnClose">X</a>
 </div>

<强> Working Demo

您可以使用以下方法通过 jquery 绑定(bind)点击事件:

$('a').click(function(){
 console.log($(this).closest('div').attr('id'));
});

<强> Demo Using Jquery click handler