Javascript For 循环

Question

目前我正在使用 RaphealJS 库开发一个项目，一切似乎都很好，直到我遇到这样的问题。

而不是多次这样做:

   dolphinIcon[1].click(function() {              
           this.attr({  
             stroke: 'black', 'stroke-width': 2,  
             fill: 'green'  
           }); 
           alert(1);
   });

   dolphinIcon[2].click(function() {              
           this.attr({  
             stroke: 'black', 'stroke-width': 2,  
             fill: 'green'  
           }); 
           alert(2);
   });

  dolphinIcon[3].click(function() {              
           this.attr({  
             stroke: 'black', 'stroke-width': 2,  
             fill: 'green'  
           }); 
           alert(3);
   });

为什么我不能这样做？

for(var i=0; i<dolphinIcon.length; i++){
     dolphinIcon[i].click(function() {              
        this.attr({  
           stroke: 'black', 'stroke-width': 2,  
           fill: 'green'  
        });      
        alert(i);
     });
}

我只希望存储在数组中的每个图标都 alert() 它的索引号，但是当我使用 for 循环时，无论哪个图标，它总是 alert() 相同的数字(数组的大小)我点了。我应该如何解决这个问题？

Answer 1

这是一个经典的 JavaScript 问题。每个回调函数中的变量 i 都是相同的，一旦循环完成，它将是 dolphinIcon.length。

您需要使用闭包来“捕获”i 变量。

var clickFunc = function(i){
    return function(){
        this.attr({  
           stroke: 'black', 'stroke-width': 2,  
           fill: 'green'  
        });      
        alert(i);
    }
};
for(var i=0; i<dolphinIcon.length; i++){
     dolphinIcon[i].click(clickFunc(i));
}

clickFunc 将返回一个“关闭”i 值的函数。

您还可以将额外的数据传递给 click 处理程序，以便在调用时使用。

for(var i=0; i<dolphinIcon.length; i++){
     dolphinIcon[i].click({i: i}, function(e) {              
        this.attr({  
           stroke: 'black', 'stroke-width': 2,  
           fill: 'green'  
        });      
        alert(e.data.i);
     });
}