javascript - 如何使用 Jquery 将 css 应用于具有特定 ID 的容器中的特定项目 ID？

Question

我有三个 ID 不同但内容相似但 ID 相似的容器，一个是书本，另一个是钢笔和铅笔。

当在每个具有 ID 的容器下单击项目时，如何将样式应用于项目？

<div id="Books">
<div id="1">Stack</div>
<div id="2">Flow</div>
</div>

<div id="Pens">
<div id="1">big</div>
<div id="2">small</div>
</div>

<div id="Pencils">
<div id="1">big</div>
<div id="2">small</div>
</div>

标签： javascriptjqueryhtmlcss

Answer 1

遵循使用vanilla javascript的完整工作解决方案：

function clicked(element) {
  element.classList.add('success')
}

.success {
  color: green;
}

<div id="Books">
<div id="1" onclick="clicked(this)">Stack</div>
<div id="2" onclick="clicked(this)">Flow</div>
</div>

<div id="Pens">
<div id="1" onclick="clicked(this)">big</div>
<div id="2" onclick="clicked(this)">small</div>
</div>

<div id="Pencils">
<div id="1" onclick="clicked(this)">big</div>
<div id="2" onclick="clicked(this)">small</div>
</div>