javascript - 通过匿名函数分配鼠标悬停时如何传递局部变量？

Question

我有一个运行 onload 的设置函数来为元素添加一些行为。 setup 函数将参数传递给 mouseover 事件，但这些参数在 for 循环期间被更改，因为它们是本地引用。

function setupAreas( image, map, lots ) {
    // obj is a simple wrapper for doc.getElementById
    var image = obj(image); // image for imagemap
    var map = obj(map); // imagemap element

    var areas = map.getElementsByTagName('area');
    for (var i in areas) {
        var area = areas[i]; // imagemap area element
        area.id = area.alt;
    }

    for (var lot_id in lots) {
        if (lot_id != 'Lot No' && lot_id != '') {
            var area = document.getElementById(lot_id);
            if (!area || !area.coords) {
                alert('no map coords for lot '+lot_id);
            } else {
                var coords = area.coords.split(",");
                //alert('tag: '+area.tagName+' id: '+lot_id+' area: '+area);
                var details = lots[lot_id];
                if (details) {
                    // setup mouseover call with complete details of area
                    area.onmouseover = function(){ showLot(lot_id, area, coords, details, image, map, areas, lots) };
... snip ...

问题在于，由于 for 循环，引用 lot_id 和 area 在每次迭代中都会更改。结果是任何元素的鼠标悬停事件都给出 lot_id 和仅最后一个区域 的区域。

我不想也不需要为此使用 jQuery。首选不污染全局命名空间的简单 JS 解决方案。

Answer 1

尝试用闭包包围 for 循环的内容:

for (var lot_id in lots) {
    (function(lid){
        //contents of for loop - use lid instead of lot_id    
    })(lot_id);
}

让我知道结果如何

编辑:您不必实际上包围整个循环，您可以只包围附加事件的行:

(function(lid){
    area.onmouseover = function(){ showLot(lid, area, coords, details, image, map, areas, lots) };
})(lot_id);

但是围绕整个循环可能会防止 future 出现错误:)