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

Question

我有一个导航栏，其中每个按钮都会更改正文的背景。他们各自将其更改为不同的颜色。我为每个按钮创建了 onmouseover 和 onmouseout 函数来实现这一点。但是，我想知道是否有一种方法可以通过按类引用它们来编写每个函数中的一个？它们都有相同类别的按钮。有没有一种方法可以将函数应用于某个类的所有元素？我的代码:

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

以下是我的解决方案:使用数据属性并迭代具有给定类的所有元素。

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>