我不断收到错误links[i] is undefined
我明确地定义它,但它一直给我错误 - 任何想法?
我试图在我拥有的5个链接上进行不显眼的图像翻转。
function loadImages(){
path = 'uploads/Splash-4/nav/';
links = new Array();
for (i=1;i<=5;i++){
var id = "link-"+i;
var defaultState = '<img src="' +path+i+'.jpg" border="0" />';
links[i] = document.getElementById(id);
// Place all image linksinto anchor
links[i].innerHTML = defaultState;
// What to do on mouseover
links[i].onmouseover = function() {
links[i].innerHTML = '<img src="' +path+i+'a.jpg" border="0" />';
}
// What to do on mouse oUt
links[i].onmouseout = function() {
links[i].innerHTML = defaultState;
}
}
}
window.onload = loadImages;
HTML :
<a href="?page=Profile" id="link-1"></a>
<a href="?page=for-sale" id="link-2"></a><br />
<a href="?page=testimonials" id="link-3"></a><br />
<a href="?page=free-home-appraisal" id="link-4" /></a><br />
<a href="?page=contact-me" id="link-5"></a><br />
答案 0 :(得分:6)
首先,你应该说:
var links = [];
通常不鼓励使用Array
构造函数本身,并且不指定var
,而是使links
变量驻留在全局空间中,这通常是不好的。 / p>
现在,关于你的实际问题。
您的事件处理程序正在引用外部作用域中的path
和i
变量,但是当它们实际遇到时,变量i
的值为{ {1}} - 不是你想要的!为了解决这个问题,您可以更改:
6
到
// What to do on mouseover
links[i].onmouseover = function() {
links[i].innerHTML = '<img src="' +path+i+'a.jpg" border="0" />';
}
// What to do on mouse oUt
links[i].onmouseout = function() {
links[i].innerHTML = defaultState;
}
这会创建一个新的闭包来保存您想要捕获的变量。这样,内部 // What to do on mouseover
links[i].onmouseover = (function(path, i) {
return function () {
links[i].innerHTML = '<img src="' +path+i+'a.jpg" border="0" />';
};
})(path, i);
// What to do on mouseout
links[i].onmouseout = (function(i) {
return function () {
links[i].innerHTML = defaultState;
}
})(i);
仍可以是i
,而外部3
可以是6。
答案 1 :(得分:2)
问题在于,当您的onmouseover()
函数被调用时,您的变量i = 6
会因为您的上一次迭代产生i = 6
,导致循环结束。因此,您必须在某处保护i
。例如:
function loadImages(){
path = 'uploads/Splash-4/nav/';
var links = [];
for (i=1;i<=5;i++){
(function(j) {
var id = "link-"+j;
var defaultState = '<img src="' +path+j+'.jpg" border="0" />';
links[j] = document.getElementById(id);
// Place all image linksinto anchor
links[j].innerHTML = defaultState;
// What to do on mouseover
links[j].onmouseover = function() {
links[j].innerHTML = '<img src="' +path+j+'a.jpg" border="0" />';
}
// What to do on mouse oUt
links[j].onmouseout = function() {
links[j].innerHTML = defaultState;
}
})(i); // call the anonymous function with i, thus protecting it's value for
// the mouseover/mouseout
}
}
答案 2 :(得分:0)
您的代码段不包含变量链接的声明。如果你没有在其他地方定义它(即,如果它是一个局部变量),你需要在这里做:
而不是
links = new Array();
你可以做到
var links = new Array();
可以找到一个例子here。
如果您已在其他地方宣布,可能就是这一行
document.getElementById(id);
返回null。