javascript 函数可以应用于某个 CSS 类的所有元素吗？

Question

我有一个导航栏，其中每个按钮都会更改正文的背景。他们每个人都将其更改为不同的颜色。我创建onmouseover并onmouseout为每个按钮的功能来实现这一目标。但是，我想知道是否有一种方法可以只通过它们的类引用它们来编写每个函数中的一个？它们都具有相同的button. 有没有一种方法可以将函数应用于某个类的所有元素？我的代码：

function whichButton(x) {
    if (x==1)
        return "red";
    if (x==2)
        return "green";
    if (x==3)
        return "blue";
    if (x==4)
        return "orange";
    if (x==0)
        return initBG;
}

button1.onmouseover = function() {
    document.body.style.backgroundColor = whichButton(1);
}

button1.onmouseout = function() {
    document.body.style.backgroundColor = whichButton(0);
}

button2.onmouseover = function() {
    document.body.style.backgroundColor = whichButton(2);
}

button2.onmouseout = function() {
    document.body.style.backgroundColor = whichButton(0);
}

button3.onmouseover = function() {
    document.body.style.backgroundColor = whichButton(3);
}

button3.onmouseout = function() {
    document.body.style.backgroundColor = whichButton(0);
}

button4.onmouseover = function() {
    document.body.style.backgroundColor = whichButton(4);
}

button4.onmouseout = function() {
    document.body.style.backgroundColor = whichButton(0);
}

initBG 只保存页面的初始背景。

我试过这个：

document.getElementsByClassName('button').onmouseover = function() {
    document.body.style.backgroundColor = whichButton(1);
}

但它不会触发该功能。我想要做到这一点，我还需要有一种方法可以将元素的 ID 作为字符串读取，这样我才能得到它的编号......

这更多是出于好奇而不是必要，只是想办法让我的代码变小！我可以看到这在许多应用程序中都很有用，所以我很想了解更多信息！

对应的 HTML：

<div id="navbar">

<p id="button1" class="button">Red</p><p id="button2" class="button">Blue</p><p id="button3" class="button">Green</p><p id="button4" class="button">Orange</p>

</div>

Answer 1

这是我解决它的建议：使用 data 属性并迭代具有给定类的所有元素。

function applyColor(element) {
  var color = element.getAttribute('data-bg');
  document.body.style.backgroundColor = color;
}

var buttons = document.getElementsByClassName("button");

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("mouseover", function() {
    applyColor(this);
  }, false);
}

<nav>
  <button class="button" data-bg="red">red</button>
  <button class="button" data-bg="blue">blue</button>
  <button class="button" data-bg="yellow">yellow</button>
  <button class="button" data-bg="green">green</button>
  <button class="button" data-bg="pink">pink</button>
  <button class="button" data-bg="magenta">magenta</button>
</nav>