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

Getting element attribute with jQuery .attr() method

本文关键字：获取 元素 属性 方法 jQuery attr 使用      更新时间：2024-02-03

我使用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

正如你所看到的，第一个来自我点击的第一个div，但由于我也在点击它的父级，它会输出父级的id。

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

我该怎么做？

使用.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();
});
相关文章：