获取最接近的 Div 的 ID 两次不起作用

Get ID of closest Div not working twice

本文关键字：两次 不起作用 最接近 Div ID 获取      更新时间：2023-09-26

>我有一个关闭按钮，我正在处理，正在使用"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>
您需要

使用关键字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>

工作演示

您可以使用以下命令通过 jquery 绑定点击事件：

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

使用 Jquery 单击处理程序的演示

您遇到的问题是由于您选择要更改显示的div 的方式造成的：每次单击链接时，您都会调用与最接近的相同选择器，该选择器将仅考虑div 列表中的第一个元素。我建议你简单地将jQuery事件绑定到所有A标签，如下所示：

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

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

干杯

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

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

这里的"事件"是隐式对象，它保存了DOM元素上事件的所有信息。

http://jsfiddle.net/5x7g96hu/3/

相关文章：