javascript “ document.getElementById onmouseover 和函数” 行为不符合预期 × 108641
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6552047/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
" document.getElementById onmouseover and function " does not behave as wished × 108641
提问by jroeleveld
In this function, it should give the menu items (li's) an specific background (png) out of an array. However; it doesn't. It gives all the li's the background called color 'blue' :(. Do you see the problem?
在这个函数中，它应该为菜单项（li's）提供一个数组中的特定背景（png）。然而; 它没有。它给所有 li 的背景称为颜色“蓝色”:(。你看到问题了吗？
//Gives the menu items a style when hovering over it, in the sequence of the setting in the variable 'backgrounds', on top.
var backgrounds = ["blue", "green", "pink", "purple"];
function MenuColorChange() {
for (var i = 0; i <= 10 ; i++) {
document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseover = function() {
this.style.backgroundImage= "url(images/" + backgrounds[(i % backgrounds.length)] + ".png)";
}
document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseout = function() {
this.style.background = 'none';
MenuActiveColor();
}
}
}
Html:
网址：
<ul>
<li id="custom-menu-item-id-1">
<a href="#">
Home
</a>
</li>
/* And 3 li's more... */
</ul>
回答by Prusse
The function you use for onmouseoveris a closuse of the outer function, in the time it is executed all onmouseoverhandlers have the save value of i, to achieve what you seen to want do:
您使用的函数onmouseover是外部函数的闭包，在执行它时，所有onmouseover处理程序的保存值都为i，以实现您所看到的想要执行的操作：
//Gives the menu items a style when hovering over it, in the sequence of the setting in the variable 'backgrounds', on top.
var backgrounds = ["blue", "green", "pink", "purple"];
function MenuColorChange() {
for (var i = 0; i <= 10 ; i++) {
document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseover = (function(valueOfI){ return function() {
this.style.backgroundImage= "url(images/" + backgrounds[(valueOfI % backgrounds.length)] + ".png)";
}; })(i);
document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseout = function() {
this.style.background = 'none';
MenuActiveColor();
}
}
}
回答by Samir Talwar
This surprises me. I would expect it to make all the backgrounds pink. The reason this happens is because by the time you actually hover over any of your <li>elements, iwill be 10, and 10 % 4 = 2. Index #2 of your array is 'pink'.
这让我很惊讶。我希望它使所有背景都变成粉红色。发生这种情况的原因是，当您实际将鼠标悬停在任何<li>元素上时，i将是10和10 % 4 = 2。数组的索引 #2 是'pink'.
To ensure that iis the value you want when the mouseoverand mouseoutevents are fired, wrap them in a function.
为确保在触发mouseover和mouseout事件i时这是您想要的值，请将它们包装在一个函数中。
function MenuColorChange() {
for (var i = 0; i <= 10 ; i++) {
(function(i) {
document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseover = function() {
this.style.backgroundImage = "url(images/" + backgrounds[(i % backgrounds.length)] + ".png)";
}
document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseout = function() {
this.style.background = 'none';
MenuActiveColor();
}
}(i));
}
}
回答by M3NTA7
Here is an explanation that may help: variables-in-anonymous-functions
这是一个可能有帮助的解释：匿名函数中的变量
