javascript - 使用 jQuery .attr() 方法获取元素属性

Question

我使用 jQuery .attr() 方法获取元素属性的值，在本例中为 id，并将其存储到字符串中。然后我将字符串中的“info”替换为“article”以隐藏和显示页面中的元素。

我的 HTML 代码如下所示:

<div id="navigator">
    <div id="info_01"><a href="#">Lorem Ipsum</a>
        <div id="info_02"><a href="#">Lorem Ipsum</a></div>
    </div>
    <div id="info_03"><a href="#">Lorem Ipsum</a></div>
</div>

jQuery 代码:

    $('#navigator>div, #navigator>div>div').click(function(){
    var variable=$(this).attr('id');
    var variable2=(variable.replace("info", "article"));
    console.log(variable2);

    $("#another_div").hide();
    $("#"+variable2).show();
});

我将日志输出到控制台，当我点击 #navigator 中的父 div 时，例如 #info_01 和 #info_03 它仅打印我点击的 div 的 id，但是当我点击 #navigator 中的子元素(例如 #info_02)时，它会打印两行:

article_02
article_01

如您所见，第一个来 self 点击的第一个 div，但由于我也点击了它的父级，它输出了父级的 id。

我只需要输出一个id，即我点击的元素的id，而不是其父元素的id。

我该怎么做？

Answer 1

使用.stopPropagation()。这可以防止事件在 DOM 树中向上冒泡，从而防止任何父处理程序收到事件通知。在 https://api.jquery.com/event.stoppropagation 上阅读更多内容

$('#navigator>div, #navigator>div>div').click(function(e){
    var variable=$(this).attr('id');
    var variable2=(variable.replace("info", "article"));
    console.log(variable2);

    $("#another_div").hide();
    $("#"+variable2).show();
    // propagate
    e.stopPropagation();
});