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

我有一个导航栏，每个按钮都会改变身体的背景。他们各自把它换成不同的颜色。我为每个按钮创建了

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>

红色
蓝色
绿色
橙色

您可以使用事件委派，这意味着将事件侦听器附加到祖先，然后检查

事件.target

以决定要执行的操作

演示：

---

您可以使用事件委派，这意味着将事件侦听器附加到祖先，然后检查

event.target

以决定要执行的操作

演示：

---

getElementsByClassName返回一个集合。因此，你将不得不在它上面循环，你将是好的

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

[].forEach.call(buttons, function (button){
    var id = parseInt(button.id.split("").reverse().join("")); //This will give you the number from the id
    button.onmouseover = = function() {
        document.body.style.backgroundColor = whichButton(id);
    }

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

});

为了确保ES6的兼容性，有更好的方法

var buttons = document.getElementsByClassName("button");
for (button of buttons) {
    var id = parseInt(button.id.split("").reverse().join("")); //This will give you the number from the id
    button.onmouseover = = function() {
        document.body.style.backgroundColor = whichButton(id);
    }

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

---

getElementsByClassName返回一个集合。因此，你将不得不在它上面循环，你将是好的

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

[].forEach.call(buttons, function (button){
    var id = parseInt(button.id.split("").reverse().join("")); //This will give you the number from the id
    button.onmouseover = = function() {
        document.body.style.backgroundColor = whichButton(id);
    }

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

});

为了确保ES6的兼容性，有更好的方法

var buttons = document.getElementsByClassName("button");
for (button of buttons) {
    var id = parseInt(button.id.split("").reverse().join("")); //This will give you the number from the id
    button.onmouseover = = function() {
        document.body.style.backgroundColor = whichButton(id);
    }

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

---

如前所述，getElementsByClassName返回一个集合，您不能像在jQuery中那样将事件添加到集合中。如果是纯JS，则需要使用for循环，然后将事件附加到每个单独的元素，如下所示：

var buttons = document.getElementsByClassName('button');
for (var i = 0; i < buttons.length; i++) {
    buttons[i].onmouseover = function (event) {
        var colour = event.target.className.split(" ")[1];       
        document.body.style.backgroundColor = colour;
    }
}

---

var buttons=document.getElementsByClassName（'button'）；
对于（变量i=0；i

---

如前所述，GetElementsByCassName返回一个集合，您不能像在jQuery中那样将事件添加到集合中。如果是纯JS，则需要使用for循环，然后将事件附加到每个单独的元素，如下所示：

var buttons = document.getElementsByClassName('button');
for (var i = 0; i < buttons.length; i++) {
    buttons[i].onmouseover = function (event) {
        var colour = event.target.className.split(" ")[1];       
        document.body.style.backgroundColor = colour;
    }
}

---

var buttons=document.getElementsByClassName（'button'）；
对于（变量i=0；i

---

以下是我解决这个问题的建议： 使用data属性并对给定类的所有元素进行迭代

函数applyColor（元素）{
var color=element.getAttribute（'data-bg'）；
document.body.style.backgroundColor=颜色；
}
var buttons=document.getElementsByClassName（“按钮”）；
对于（变量i=0；i

红色
蓝色
黄色的
绿色
粉红色
洋红

以下是我的解决建议： 使用data属性并对给定类的所有元素进行迭代

函数applyColor（元素）{
var color=element.getAttribute（'data-bg'）；
document.body.style.backgroundColor=颜色；
}
var buttons=document.getElementsByClassName（“按钮”）；
对于（变量i=0；i

红色
蓝色
黄色的
绿色
粉红色
洋红
第一条评论实际上为我解决了这个问题。我这样做：

document.onmouseover = function() {
    var x = event.target;
    y = x.id.toString().replace('button','');
    if (y > 0 && y <= 4)
        document.body.style.backgroundColor = whichButton(y);
}

document.onmouseout = function() {
    var x = event.target;
    y = x.id.toString().replace('button','');
    if (y > 0 && y <= 4)
        document.body.style.backgroundColor = whichButton(0);
}

document.onmouseover=function（）{
var x=事件目标；
y=x.id.toString（）.替换（'按钮'，''）；
如果（y>0&&y 0&&y第一条评论实际上为我解决了这个问题。我这样做了：

document.onmouseover = function() {
    var x = event.target;
    y = x.id.toString().replace('button','');
    if (y > 0 && y <= 4)
        document.body.style.backgroundColor = whichButton(y);
}

document.onmouseout = function() {
    var x = event.target;
    y = x.id.toString().replace('button','');
    if (y > 0 && y <= 4)
        document.body.style.backgroundColor = whichButton(0);
}

document.onmouseover=function（）{
var x=事件目标；
y=x.id.toString（）.替换（'按钮'，''）；
如果（y>0&&y 0&&y将事件侦听器绑定到文档并检查Callback中的目标。请首先添加相关html。您有三个不同的函数。但您正在询问如何将相同的函数应用于所有按钮？我在这里迷路了。请更清楚地说明要求基本上，我已经编写了完全相同的onmouseover/onmouseout函数4我觉得必须有一种方法，只需编写一次，并让每个按钮根据它的类而不是ID来触发它。代码工作正常，我只是想了解是否有一种更有效的方法来执行我所做的操作。document.getElementsByClassName（'button'））-返回HTML集合，但基本上，您可以将其视为数组-因此，您可以循环使用它…将事件侦听器绑定到文档并检查Callback中的目标添加相关HTML首先请您有三个不同的函数..但您正在询问如何将相同的函数应用于所有按钮？我在这里迷路了..请提出要求更清楚的是，基本上，我已经编写了4次完全相同的onmouseover/onmouseout函数。我觉得必须有一种方法，只需编写一次，并让每个按钮根据它的类而不是ID触发它。代码工作正常，我只是想了解是否有更有效的方法来完成我所做的事情。document.getElementsByClassName（'button'）-返回HTML集合，但基本上，您可以将其视为数组-因此，您可以循环遍历它…集合没有
forEach
方法。您需要