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

但它没有触发该功能。我想这样做，我也需要有办法阅读元素＆＃39; 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属性并迭代给定类的所有元素。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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 3

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

如果我鼠标悬停在“按钮”上，它会删除单词“button”，留下数字（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);   
    }
});

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

5 个答案: