小编Miu*_*aji的帖子

我尝试了以下代码：

var a = document.getElementsByClassName("cc");
for (var i = 0; i < a.length; i++) {
  a[i].className = "cd";
}

.cc {
  background-color: blue;
}

.cd {
  background-color: chartreuse;
}

<ul>
  <li class="cc">A</li>
  <li class="cc">B</li>
  <li class="cc">C</li>
  <li class="cd">D</li>
</ul>

这只会更新替代列表项，而不是所有具有相同类的项。我想知道这不起作用的原因。

我想做的事

我想缩短代码。此Drum Play应用程序通过按某些键或用鼠标单击来播放声音。

它可以工作，但是单击事件的代码太长，因为我多次重复了相同的代码。

谁能使它更清洁或更短？

我尝试过的

我尝试了循环，如下所示：

document.querySelector(`div[data-key="${dataKeys[i]}"]`).addEventListener...

但这没有用。

我的当前代码

这是我的代码。

document.querySelector(`div[data-key="${dataKeys[i]}"]`).addEventListener...

如果有人可以使我的代码更简洁或更短，我将不胜感激。