Javascript数组未定义

Question

我一直在收到错误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 />

Answer 1

首先,你应该说:

var links = [];

通常不鼓励使用Array构造函数本身,并且通过不指定var,您将使links变量驻留在全局空间中,这通常是坏的.

现在,关于你的实际问题.

您的事件处理程序正在引用外部作用域中的变量path和i变量,但是当它们实际遇到时,该变量i具有值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而外部i则是6.