0

在这段代码中，我应该将翻转效果绑定到元素<area>中的每个标签<map>。

function initLinks(webrt) {
  var areas = document.querySelectorAll("map#streetmap > area");
  var links = new Array(areas.length);
  for (var i=0; i<links.length; i++) {
    links[i] = new Image(786,272);
    links[i].src = webrt+"templates/default/sketches/links"+(i+1)+".png";
    areas[i].onmouseover=function(){switchLinkImg(webrt+"templates/default/sketches/links"+(i+1)+".png");};
    areas[i].onmouseout=function(){switchLinkImg(webrt+"templates/default/sketches/links.png");};
  }
}

奇怪的是，每个<area>onmouseover 事件都会尝试加载不存在的图像：/templates/default/sketches/links6.png. 为什么它将这个i递增到 6 的变量保留为全局变量，而不是将我传递给函数的字符串？

我该如何解决？

注意：没有 jQuery！

4

2 回答 2

2

我经常发现在使用索引时使用数组方法更干净，因为您不需要额外的包装器，而且所有内容都读起来更干净（恕我直言）：

function initLinks(webrt) {
    [].forEach.call(document.querySelectorAll("map#streetmap > area"), 
        function(elm, index){
            var img = new Image(786,272);
            img.src = webrt+"templates/default/sketches/links"+(index+1)+".png";
            elm.onmouseover=function(){switchLinkImg(webrt+"templates/default/sketches/links"+(index+1)+".png");};
            elm.onmouseout=function(){switchLinkImg(webrt+"templates/default/sketches/links.png");};
    });
}

变量计数下降了，我们通过在“循环”的每次迭代中不创建额外的新函数来避免额外的 ram-hogging 闭包。

可以肯定的是，这两种方法都有效，但是较新的数组方法还可以通过将其从 forEach() 调用中剥离出来并为其命名来允许该过程被回收。

于 2013-10-06T20:40:49.350 回答
1

尝试使用以下代码：

function initLinks(webrt) {
    var areas = document.querySelectorAll("map#streetmap > area");
    var links = new Array(areas.length);
    for (var i=0; i<links.length; i++) {
        (function(index) {
            links[index] = new Image(786,272);
            links[index].src = webrt+"templates/default/sketches/links"+(index+1)+".png";
            areas[index].onmouseover=function(){switchLinkImg(webrt+"templates/default/sketches/links"+(index+1)+".png");};
            areas[index].onmouseout=function(){switchLinkImg(webrt+"templates/default/sketches/links.png");};
        })(i);
    }
}

您应该将i变量包装到闭包中。否则它会增加。

于 2013-10-06T20:22:09.160 回答