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

您可以使用事件委託，這意味着連接事件偵聽器的祖先，然後檢查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); 
    } 
}); 

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

這裏是我的建議，解決這個問題： 使用數據屬性，並用給定的類遍歷所有元素。

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 5

第一評論實際上解決了這個問題對我來說。我這樣做：

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功能decice要使用的顏色。很好，很簡單，適合我。