Question

在下面的代码中，为什么postCodes[i].countryCode返回循环中的最后一个值，而不是循环中的当前值？以及如何在循环中返回当前值？

for (var i = 0; i < postCodes.length; i++) {
    for (var ind = 0; ind < salesSuite.Defaults.Countries.length; ind++) {
        if (postCodes[i].countryCode == myNamespace.Countries[ind].code) {
            $('<button/>')
                .click(function () {
                    console.log(postCodes[i].countryCode);
                })
                .appendTo($modalContent);

Answer 1

尝试添加一个函数，该函数获取一个处理程序，该函数创建一个局部变量来保存postCode。当然，原因是在处理程序中使用共享变量i，这会在调用处理程序时耗尽。所以最终在你的处理程序中你试图调用postCodes[postCodes.length].countryCode与undefined.countryCode相同，并会抛出错误..

$('<button/>')
     .click(getHandler(postCodes[i]))
     .appendTo($modalContent);
.....
.....

function getHandler(postCode){ 
// This function creates a closure variable postCode which will hold that particular postCode passed in for each invocation to be used in the function reference returned by this
  return function () {
        console.log(postCode.countryCode);
   }
}

<强> Demo

您可以利用jquery数据api来保存postCode，而不是完成所有这些操作。

  $('<button/>')
            .click(function () {
                console.log($(this).data('postCode').countryCode);
            })
            .appendTo($modalContent).data('postCode', postCodes[i]);

<强> Demo

使用object中的值添加onclick事件

1 个答案: