javascript - 我可以在鼠标悬停时获取元素的类并将其用于变量吗？

Question

我创建了一个乐器模拟。它是使用表创建的。目前，如果我将鼠标悬停在如下所示的 class="ENat"上(这将是 E 注释)，它会突出显示页面上的所有“ENat”类(E 注释)。完美!

但是，我想要它做的是将我悬停在“elms”变量上的类传递给“elms”变量，这样它就可以在我创建的所有不同类(注释)上工作，而不会与代码冗余。因此，如果我将鼠标悬停在“A”音符类别上，所有“A”音符都会发生变化，等等。第一篇文章，如果我不够清楚，请原谅我。

var elms = document.getElementsByClassName('ENat');
var n = elms.length;
function changeColor(color) {
    for(var i = 0; i < n; i ++) {
        elms[i].style.backgroundColor = color;
    }
}
for(var i = 0; i < n; i ++) {
    elms[i].onmouseover = function() {
        changeColor("red");
    };
    elms[i].onmouseout = function() {
        changeColor("tan");
    };
}

Answer 1

您想要委托(delegate) - 正如您所说，我已经使用表格实现了，但是您可以在任何元素上使用类，例如 span 或 div:

window.addEventListener("load", () => { // on page load
  document.getElementById("container").addEventListener("mouseover", overAndOut)
  document.getElementById("container").addEventListener("mouseout", overAndOut)
});
const overAndOut = e => {
  const tgt = e.target;
  if (e.target.classList.contains("note")) {
    const className = tgt.className.match(/[A-H]Nat/); // match on note classname
    [...document.querySelectorAll("." + className)]
    .forEach(elem => elem.style.backgroundColor = e.type === "mouseover" ? "red" : "tan");
  }
};

.note {
  background-color: tan
}

<table>
  <tbody id="container">
    <tr>
      <td class="note ANat">A</td>
      <td class="note BNat">B</td>
      <td class="note CNat">C</td>
      <td class="note DNat">D</td>
      <td class="note ENat">E</td>
      <td class="note FNat">F</td>
      <td class="note GNat">G</td>
      <td class="note HNat">H/B</td>
    </tr>
    <tr>
      <td class="note ANat">A</td>
      <td class="note BNat">B</td>
      <td class="note CNat">C</td>
      <td class="note DNat">D</td>
      <td class="note ENat">E</td>
      <td class="note FNat">F</td>
      <td class="note GNat">G</td>
      <td class="note HNat">H/B</td>
    </tr>
    <tr>
      <td class="note ANat">A</td>
      <td class="note BNat">B</td>
      <td class="note CNat">C</td>
      <td class="note DNat">D</td>
      <td class="note ENat">E</td>
      <td class="note FNat">F</td>
      <td class="note GNat">G</td>
      <td class="note HNat">H/B</td>
    </tr>
  </tbody>
</table>