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而不是第二个链接。我对此很陌生，不确定我做错了什么。我尝试使用$（this）而不是$（'。btnClose'），但它返回'undefined'。

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：

<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绑定click事件：

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

<强> Demo Using Jquery click handler

Answer 2

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

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

现在，当您点击某个链接时，它会查找所点击的A标记的最近DIV。你甚至可以避免使用id引用（就像在我的考试中一样），因为很明显你想要隐藏A标签所在的div。

干杯，

Answer 3

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

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

这里“event”是隐含的对象，它包含DOM元素上事件的所有信息。

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

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

3 个答案: