Javascript 如何在单击的div-jQuery中将类添加到id为的子元素

如何单击容器，然后将class=hero添加到第一个带有id的跨距中？有类似的问题，但不是针对id。非常感谢

试试这个：

<div id="container">
    <span id="hp"> add class here</span>
    <span id="hp"> Do not add class here</span>
</div>
$("#container").on("click", function() {
    code here
});

但是，正如评论中指出的，HTML页面中元素的ID应该是唯一的，以避免任何不必要的错误。

$document.readyfunction{ $'.container'。单击函数事件{ $.container.parent.find'p'.removeClasscolor； $event.target.addClasscolor； }; }; .颜色{ 颜色：蓝色； }

在此处添加类

不要在此处添加类

---

id必须唯一，因此我将第一个span id从hp更改为hp1

---

有多种方法可以做到这一点。下面提到了几个选项

//使用find&eq $container.onclick，函数{ $this.find'span'.eq0.addClass'myClass' }; //使用第一个子psuedo选择器 $container.onclick，函数{ $this.find'：第一个孩子.addClass'myClassRed' }; //使用子项和第一个pusedo选择器 $container.onclick，函数{ $this.children:first.addClass'myClassBrown' }; .myClass{ 颜色：绿色； } myClassRed先生{ 颜色：红色； } 布朗先生{ 颜色：棕色； } 在此处添加类 不要在这里添加类 id应该是唯一的。的可能重复项

$("#container").on("click", function() {
    $(this).find('span:first').addClass('hero');
});

<div id="container">
    <span id="hp1"> add class here</span></br>
    <span id="hp"> Do not add class here</span>
</div>
 <script>
     $("#container").on("click", function() {
        $("#hp1").addClass("hero");
    });
</script>