jQuery,悬停方法和闭包

Question

一直试图围绕功能范围包围大脑的Javascript关闭一直在努力,但我认为他们正在缠绕我.我看了很多帖子(Nyman是最有帮助的),但显然仍然没有得到它.试图在jQuery中对悬停方法运行循环.需要悬停功能才能最终触发多个动作,但是很高兴让他们现在可以使用单个图像交换.

$(document).ready(function() {

    imageSource = []; 
    imageSource[0] = 'images/img0.png'  //load 0 position with "empty" png
    imgArea = [];

    for (var i=1; i<11; i++) {

        (function( ){  //anonymous function for scope

            imageSource[i] = 'images/img' + i + '.png';
            imgArea[i] = '#areamap_Img' + i;

            // running console.log here gives expected values for both

            $(imgArea[i]).hover(   //imgArea[i] (selector) works correctly here

                function() {
                    $('#imgSwap').attr('src',imageSource[i]);  // imageSource[i] is undefined here
                },
                function() {
                    $('#imgSwap').attr('src','images/img0.png');
                });

        })(); // end anonymous function and execute

    }; // for loop

}); 

尝试使用匿名函数从另一个jQuery帖子中进行作用域的想法.似乎工作正常,但在第一个悬停函数中抛出一个未定义的数组值,我想因为它是一个内部函数(硬编码图像源在那里正常工作).

Answer 1

你的闭包确实存在问题,它与你对var的使用有关i.由于您的匿名函数没有本地版本i,因此它使用的是上面函数的版本.但是,当它试图i在以后访问时,i== 11(因为这是使循环终止的原因).要解决此问题,您需要i在每个匿名函数中声明一个本地版本,如下所示:

for (var i=1; i<11; i++) {

    (function( ){  //anonymous function for scope                
            var index = i; // The important part!

            // It's not technically necessary to use 'index' here, but for good measure...
            imageSource[index] = 'images/img' + index + '.png';
            imgArea[index] = '#areamap_Img' + index;

            $(imgArea[index]).hover(

                    function() {
                            $('#imgSwap').attr('src',imageSource[index]);  // Here's where `index` is necesssary.
                    },
                    function() {
                            $('#imgSwap').attr('src','images/img0.png');
                    });

    })(); // end anonymous function and execute

}; // for loop

此外,您的代码中存在一个小问题,您应该为好的方法进行修复.您没有正确访问本地变量; 你应该使用:

var imageSource = []; 
var imageSource[0] = 'images/img0.png'  //load 0 position with "empty" png
var imgArea = []

没有"var",您将声明并访问全局变量.(如果这是你的预期行为,那么我道歉.)