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

我只想让存储在数组中的每个图标alert()它的索引编号，但是当我使用for-loop时，无论我单击哪个图标，它总是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);
     });
}

Answer 2

这是因为javascript闭包的工作方式--基本上，您的回调/事件处理函数绑定到循环变量i，而不是在循环的连续迭代中绑定到i的特定值。

这里有一个简单的解决方法:只需用匿名函数包装循环的内部，并将循环变量传递给该函数。这将导致闭包附加到该特定值。

例如：

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

Answer 3

试试这个：

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