Javascript数组未定义

时间:2010-08-30 14:27:16

标签: javascript arrays

我不断收到错误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 />

3 个答案:

答案 0 :(得分:6)

首先,你应该说:

var links = [];

通常不鼓励使用Array构造函数本身,并且不指定var,而是使links变量驻留在全局空间中,这通常是不好的。 / p>

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

您的事件处理程序正在引用外部作用域中的pathi变量,但是当它们实际遇到时,变量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。