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>

Answer 2

如前所述，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;
    }
}

http://jsfiddle.net/andyfurniss/1n5vann9/

Answer 3

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);
    }
}

Answer 4

第一条评论实际上为我解决了这个问题。我这样做了：

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);
}

如果我将鼠标悬停在“按钮”上，它会删除“按钮”一词，留下数字 (1-4)，然后将其发送到我的 whichButton 函数以决定使用哪种颜色。又好又简单，适合我。

Answer 5

您可以使用事件委托，这意味着将事件侦听器附加到祖先，然后检查 event.target 以决定要做什么。

演示：http://jsfiddle.net/a58tj1ak/

// given your HTML and whichButton function like this:
function whichButton(x) {
    var initBG = '#fff';
    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;
}

// get the buttons into an array
var buttons = [].slice.call(document.getElementsByClassName('button'));
// add event listener to the #navbar element
document.getElementById('navbar').addEventListener('mouseover', function(e){
   // target is an element being hovered
   var target = e.target;
    // check if the target is in the array of buttons
    var index = buttons.indexOf( e.target );
    if( index > -1 ){
        document.body.style.backgroundColor = whichButton(index + 1)
    }
    else {
        document.body.style.backgroundColor = whichButton(0);   
    }
});