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变量驻留在全局空间中，这通常是不好的。 / p>

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

您的事件处理程序正在引用外部作用域中的path和i变量，但是当它们实际遇到时，变量i的值为{ {1}} - 不是你想要的！为了解决这个问题，您可以更改：

到

    // 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。

Answer 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

    }
}

Answer 3

您的代码段不包含变量链接的声明。如果你没有在其他地方定义它（即，如果它是一个局部变量），你需要在这里做：

而不是

links = new Array();

你可以做到

var links = new Array();

可以找到一个例子here。

如果您已在其他地方宣布，可能就是这一行

document.getElementById(id);

返回null。

Javascript数组未定义

3 个答案: