3

我有以下内容：

 for (var i = 0; i <= 10; i += 1) {

    var $page_button = $('<a>', {
        html : i,
        click : function () {

            var index = i;
            console.log(index);
            return false;
        }
    });

    $page_button.appendTo($wrapper);
}

我认为这var index将为循环的每次迭代单独定义，因为它包含在一个函数中。在这种情况下，打印的索引值始终为 10。

链接文本是 i 的正确值，因为它被写入 DOM，然后是不可变的。

为什么会这样，我应该改变什么来解决我的问题？

我知道这与许多其他问题相似，但使用这种表示法的行为会导致不同的结果。我正在使用 jQuery 1.7.2（不幸的是不能使用任何更新的版本。）

4

4 回答 4

4

您需要将其封闭在闭包中以解决问题..

var $page_button = $('<a>', {
        html : i,
        click : (function (num) {
           return function(){
               var index = num;
               console.log(index);
               return false;
            }
        })(i)
    });
于 2012-10-26T15:17:08.410 回答
2

引用i作为匿名函数的一部分被关闭。注意：不是它的value，而是对它自己的引用i。运行该函数时，将评估该值。因为函数在循环结束后运行，所以该值将始终是 的最后一个值i。要仅传递值，您可以执行以下操作：

    click : (function (index) {
        return function () {
            console.log(index);
            return false;
        };
    })(i)

您创建一个立即执行的匿名函数，它将一个值作为参数并返回您的实际函数。

于 2012-10-26T15:19:17.800 回答
0

每个处理程序都共享相同的i变量。每个都需要自己的变量范围才能引用唯一索引。

 for (var i = 0; i <= 10; i += 1) {
    var $page_button = $('<a>', {
        html : i,
        click : makeHandler(i)  // invoke makeHandler, which returns a function
    });
    $page_button.appendTo($wrapper);
}

function makeHandler(index) {
    return function () {
                console.log(index);
                return false;
           };
}

在这里，我创建了一个makeHandler接受索引参数的函数，并返回一个用作处理程序的函数。

因为函数调用设置了一个新的变量范围，并且因为在 内部创建并返回了一个函数，所以返回的makeHandler每个处理程序都将引用其自己的范围索引号。

于 2012-10-26T15:17:17.653 回答
0

该变量index是为函数的每次执行单独定义的，但是您从i函数内部的变量中复制值，因此您将i在函数运行时使用原样的值，而不是在创建函数时使用。

您需要一个在循环内执行的函数来捕获变量的值：

for (var i = 0; i <= 10; i += 1) {

  (function(){
    var index = i;

    var $page_button = $('<a>', {
      html : i,
      click : function () {
        console.log(index);
        return false;
      }
    });

  })();

  $page_button.appendTo($wrapper);
}
于 2012-10-26T15:18:24.100 回答