javascript - 函数引用而不是函数体 - 在循环中（带参数）

Question

我想替换这个：

for( var i=0; i<elementArray.length; i++ )
   elementArray[i].click(function(){
      console.log("element clicked - selectedElementIndex = " + i);                    
   });

有类似的东西：

for( var i=0; i<elementArray.length; i++ )
    elementArray[i].click( onElementClick(i) );

function onElementClick( i ){
   console.log("element clicked - selectedElementIndex = " + i ); 
}

我该怎么做 ？:)

Answer 1

由于（据我所知）单击处理程序不能接受参数，因此您需要使用范围内的变量创建一个函数，该函数应如下所示：

for( ... ) {
    elementArray[i].click( onElementClick(i) );
    ...
}

function onElementClick( id ){
   return function() {
       console.log("element clicked - selectedElementIndex = " + id ); 
   }
}

Answer 2

代替：

elementArray[i].click( onElementClick(i) );

和：

elementArray[i].click( onElementClick(elementArray[i].id));

Answer 3

将其包装在函数表达式中：

elementArray[i].click(function() {

    onElementClick(i);

});

您还需要将代码包装在函数表达式中以避免棘手的问题：

(function() {

    ...

    for ( ... ) (function(i) {

        elementArray[i].click(function() {

            onElementClick(i);

        });

    })(i);

})();

Answer 4

使用data它可能看起来像：

for (... {

  elementArray[i].click( onElementClick ).data('id',i);
}

function onElementClick(){
       console.log("element clicked - selectedElementIndex = " + $(this).data('id') ); 
}