Javascript For-Loop

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);
     });
}

我只是希望存储在数组中的每个图标都警告()它的索引号,但是当我使用for循环时,无论我点击哪个图标,它总是警告()相同的数字(数组的大小) .我该怎么解决这个问题？

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);
     });
}