Javascript 获取最近Div的ID未工作两次

我有一个关闭按钮，我正在使用“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>

函数displayNone（）{
变量id=$（'.btnClose'）。最近（'div'）。attr（'id'）；
$（'#'+id）.css（'display'，'none'）；
}

我曾经能够用第一个链接让它工作一次，但是之后的任何事情都不起作用。因此，我在JSFIDLE中进行了一个测试，看到当我单击第二个链接时，它仍然返回第一个链接的父ID，而不是第二个链接的父ID。我是个新手，不知道自己做错了什么。我尝试使用$（this）而不是$（'.btnClose'），但它返回“undefined”

功能测试（）{
变量名称=$（'.btnClose'）。最近（'div'）。属性（'id'）；
console.log（名称）；
}

您需要使用关键字

将click elements上下文传递给click handler，以将当前单击的元素作为目标：

脚本：

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

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

您需要传递click elements上下文，以使用关键字
单击处理程序，此
用于定位当前单击的元素：

脚本：

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

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

您需要传递click elements上下文，以使用关键字
单击处理程序，此
用于定位当前单击的元素：

脚本：

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

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

您需要传递click elements上下文，以使用关键字
单击处理程序，此
用于定位当前单击的元素：

脚本：

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

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

您遇到的问题是由于您选择要更改显示的div的方式：
每次单击一个链接，你都会调用同一个最接近的选择器，它只考虑div列表中的第一个元素。我建议您只需将jQuery事件绑定到所有a标记，如下所示：

$("A.btnClose").on('click', function(e) {
    e.preventDefault();
    $(this).closest('div').css('display', 'none');
});

现在，当您单击一个链接时，它将查找所单击标记中最近的DIV。
您甚至可以避免使用id引用（就像在我的examole中）本身，因为很明显您想要隐藏A标记所在的div

干杯，
您遇到的问题是由于您选择要更改显示的div的方式：
每次单击一个链接，你都会调用同一个最接近的选择器，它只考虑div列表中的第一个元素。我建议您只需将jQuery事件绑定到所有a标记，如下所示：

$("A.btnClose").on('click', function(e) {
    e.preventDefault();
    $(this).closest('div').css('display', 'none');
});

现在，当您单击一个链接时，它将查找所单击标记中最近的DIV。
您甚至可以避免使用id引用（就像在我的examole中）本身，因为很明显您想要隐藏A标记所在的div

干杯，
您遇到的问题是由于您选择要更改显示的div的方式：
每次单击一个链接，你都会调用同一个最接近的选择器，它只考虑div列表中的第一个元素。我建议您只需将jQuery事件绑定到所有a标记，如下所示：

$("A.btnClose").on('click', function(e) {
    e.preventDefault();
    $(this).closest('div').css('display', 'none');
});

现在，当您单击一个链接时，它将查找所单击标记中最近的DIV。
您甚至可以避免使用id引用（就像在我的examole中）本身，因为很明显您想要隐藏A标记所在的div

干杯，
您遇到的问题是由于您选择要更改显示的div的方式：
每次单击一个链接，你都会调用同一个最接近的选择器，它只考虑div列表中的第一个元素。我建议您只需将jQuery事件绑定到所有a标记，如下所示：

$("A.btnClose").on('click', function(e) {
    e.preventDefault();
    $(this).closest('div').css('display', 'none');
});

现在，当您单击一个链接时，它将查找所单击标记中最近的DIV。
您甚至可以避免使用id引用（就像在我的examole中）本身，因为很明显您想要隐藏A标记所在的div

干杯，
您应该避免内联JS，但以下是查找事件发生的实际元素的方法：

 function test() {
      var name = $(event.target).closest('div').attr('id');
    alert(name);
 }

这里“event”是一个隐式对象，它保存了DOM元素上事件的所有信息

您应该避免内联JS，但以下是查找事件发生的实际元素的方法：

 function test() {
      var name = $(event.target).closest('div').attr('id');
    alert(name);
 }

这里“event”是一个隐式对象，它保存了DOM元素上事件的所有信息

您应该避免内联JS，但以下是查找事件发生的实际元素的方法：

 function test() {
      var name = $(event.target).closest('div').attr('id');
    alert(name);
 }

这里“event”是一个隐式对象，它保存了DOM元素上事件的所有信息

您应该避免内联JS，但以下是查找事件发生的实际元素的方法：

 function test() {
      var name = $(event.target).closest('div').attr('id');
    alert(name);
 }

这里“event”是一个隐式对象，它保存了DOM元素上事件的所有信息

$（'.btnClose'）.on（'click'，函数（e）{e.preventDefault（）；$（this）.最近（'.popup'）.hide（）；}）
$（'.btnClose'）
将获取与所选内容匹配的元素数组。因此，有两个对象总是在html中写入。由于您有两个元素
。最近的
将始终应用于此数组中的第一个元素。
$（'.btnClose'）.on（'click'，function（e）{e.preventDefault（）；$（this）.最近的（'.popup'）.hide（）；}）
$（'.btnClose'）
将获取与所选内容匹配的元素数组。因此，有两个对象总是在html中写入。由于您有两个元素
。最近的
将始终应用于此数组中的第一个元素。
$（'.btnClose'）.on（'click'，function（e）{e.preventDefault（）；$（this）.最近的（'.popup'）.hide（）；}）
$（'.btnClose'）
将获取与所选内容匹配的元素数组。因此，有两个对象总是在html中写入。由于您有两个元素
。最近的
将始终应用于此数组中的第一个元素。
$（'.btnClose'）.on（'click'，function（e）{e.preventDefault（）；$（this）.最近的（'.popup'）.hide（）；}）
$（'.btnClose'）
将获取与所选内容匹配的元素数组。因此，有两个对象总是在html中写入。因为您有两个元素