为一组元素动态创建回调函数

Question

变量myCollection 包含jQuery DOM 元素，我想为它们的每个onclick 事件设置一个callback 函数，如下所示。实际上我想要的是，为每个元素增量设置或可以说“烧掉”number，所以当它们被点击时，它自己的号码会被提醒。当上次在循环中递增时，此代码会提醒 number 的最后一个值。

var number = 1;

myCollection.each(function(){
    this.onclick = function() { someFunction(number) };
    number++;
});

//This function is somewhere else, but accessible.
function someFunction(number) {
    alert(number);
}

如何复制或实例化每个元素的回调函数，以便它们具有相同的过程但绑定不同的参数？

Answer 1

一个经典的作用域问题，可以这样解决：

myCollection.each(function(){
  this.onclick=(function(number) {
      // in this scope, number has been "burned"
      return function() {
          someFunction(number)
      };
  }(number));
  number++;
});

请注意，jQuery 已经在每个回调中包含了一个正确范围的索引，所以您需要做的就是：

myCollection.each(function(i){
    $(this).click(function(){
        someFunction(i+1);
    });
});