Question

我使用jQuery .attr（）方法获取元素属性的值，在本例中为id，并将其存储到字符串中。然后我更换＆＃34; info＆＃34;到＆＃34;文章＆＃34;在字符串中隐藏和显示页面中的元素。

我的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

正如您所看到的，第一个来自我点击的第一个div，但由于我也点击了它的父节点，它会输出父节目的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();
});

使用jQuery .attr（）方法获取元素属性

1 个答案: