我创建了一个CSS菜单，我想让它们中的每一个在鼠标悬停事件上改变它们的颜色(我刚刚学习JavaScript，特别是for循环，我知道可以用CSS3实现这一点)。
所以，它不起作用，我在 DOM 控制台上收到此错误:Uncaught ReferenceError:linkIdOn 未定义(第 44 行)
这是我的 CSS:
<body>
<div id="menuPrincipal">
<div id="link1" class="link"><a href="">Link 1</a></div>
<div id="link2" class="link"><a href="">Link 2</a></div>
<div id="link3" class="link"><a href="">Link 3</a></div>
<div id="link4" class="link"><a href="">Link 4</a></div>
</div>
这是我的 JavaScript:
function cambioColorOnMouseover(){
for (linkId=1; linkId<5; linkId++){
var linkIdOn='link'+linkId;
document.getElementById(linkIdOn).style.backgroundColor="#eee";
console.log(linkIdOn);
}
}
function cambioColorOnLeave(){
for (linkId=1; linkId<5; linkId++){
var linkIdOff='link'+linkId;
document.getElementById(linkIdOff).style.backgroundColor="#ccc";
console.log(linkIdOff);
}
}
document.getElementById('link'+linkIdOn).onmouseover=cambioColorOnMouseover; <-- line 44
document.getElementById('link'+linkIdOff).onmouseout=cambioColorOnLeave;
最佳答案
linkIdOn 的范围仅限于 cambioColorOnMouseover。但这不是你唯一的问题。您需要移动一些东西。
我的建议:
for(var linkId = 1; linkId < 5; linkId++) {
document.getElementById('link'+linkId).onmouseover = function() {
this.style.backgroundColor = "#eee";
console.log(this.id);
};
document.getElementById('link'+linkId).onmouseout = function() {
this.style.backgroundColor = "#ccc";
console.log(this.id);
};
}
为了其他不知道 CSS3 方法来执行此操作的人的利益(尽管 OP 希望在 JavaScript 中执行此操作，但这是首选方法):
#link1, #link2, #link3, #link4, #link5 {
background-color: #ccc;
}
#link1:hover, #link2:hover, #link3:hover, #link4:hover, #link5:hover {
background-color: #eee;
}
尽管如果您使用 CSS，您可能会拥有一个 link 类，而不是使用 ids。
(我更改了两个导致示例无法运行的小拼写错误(系统告诉我编辑必须至少有 6 个字符)感谢您的帮助!- Rosamunda)
关于javascript - For循环错误: Uncaught ReferenceError,变量未定义。怎么了？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19671336/