Javascript .click（）回调从调用方法引用局部变量，而不是按值复制

以下jQuery Javascript代码包含在一个空页面中

var element;
$(function() {
  for (var i = 0; i < 10; i++) {
    element = $('<div>' + i + '</div>');
    element.click(function() {
      alert(i);
    });
    $('body').append(element);
  }
});

var元素；
$（函数（）{
对于（变量i=0；i<10；i++）{
元素=$（''+i+''）；
元素。单击（函数（）{
警报（一）；
});
$（'body'）。追加（元素）；
}
});

所需的行为是，此代码应生成编号为0到9的10个div元素。当您单击div元素时，警报弹出窗口将显示您单击的div元素的编号（即，如果用户单击标记为“4”的div元素，警报弹出窗口应显示编号4）

不管单击哪个div元素，警报弹出窗口都会显示数字10

---

如何修改此代码以使其按所需方式运行？

您需要将变量作为函数参数传递

例如：

function buildElement(i) {
    var element = $('<div>' + i + '</div>');
    element.click(function() {
        alert(i);
    });
    $('body').append(element);
}

$(function() {
    for (var i = 0; i < 10; i++) {
        buildElement(i);
    }
});

函数构建元素（i）{
变量元素=$（''+i+''）；
元素。单击（函数（）{
警报（一）；
});
$（'body'）。追加（元素）；
}
$（函数（）{
对于（变量i=0；i<10；i++）{
建筑元素（i）；
}
});

您还可以使用内联匿名函数执行此操作，如下所示：

$(function() {
    for (var i = 0; i < 10; i++) {
        (function(i) {
            var element = $('<div>' + i + '</div>');
            element.click(function() {
                alert(i);
            });
            $('body').append(element);
        })(i);
    }
});

$（函数（）{
对于（变量i=0；i<10；i++）{
（职能（一）{
变量元素=$（''+i+''）；
元素。单击（函数（）{
警报（一）；
});
$（'body'）。追加（元素）；
})（i） )；
}
});

您需要将变量作为函数参数传递

例如：

function buildElement(i) {
    var element = $('<div>' + i + '</div>');
    element.click(function() {
        alert(i);
    });
    $('body').append(element);
}

$(function() {
    for (var i = 0; i < 10; i++) {
        buildElement(i);
    }
});

函数构建元素（i）{
变量元素=$（''+i+''）；
元素。单击（函数（）{
警报（一）；
});
$（'body'）。追加（元素）；
}
$（函数（）{
对于（变量i=0；i<10；i++）{
建筑元素（i）；
}
});

您还可以使用内联匿名函数执行此操作，如下所示：

$(function() {
    for (var i = 0; i < 10; i++) {
        (function(i) {
            var element = $('<div>' + i + '</div>');
            element.click(function() {
                alert(i);
            });
            $('body').append(element);
        })(i);
    }
});

$（函数（）{
对于（变量i=0；i<10；i++）{
（职能（一）{
变量元素=$（''+i+''）；
元素。单击（函数（）{
警报（一）；
});
$（'body'）。追加（元素）；
})（i） )；
}
});

通常我将数字隐藏在id中，然后以某种结构化的方式将其显示出来：

$(function() {
    for (var i = 0; i < 10; i++) {
        element = $('<div id="id-'+i+'">' + i + '</div>');
        element.click(function() {
            alert($(this).attr('id').split('-')[1]);
        });
        $('body').append(element);
    }
});

$（函数（）{
对于（变量i=0；i<10；i++）{
元素=$（''+i+''）；
元素。单击（函数（）{
警报（$（this.attr（'id'）.split（'-'）[1]）；
});
$（'body'）。追加（元素）；
}
});

通常我将数字隐藏在id中，然后以某种结构化的方式将其显示出来：

$(function() {
    for (var i = 0; i < 10; i++) {
        element = $('<div id="id-'+i+'">' + i + '</div>');
        element.click(function() {
            alert($(this).attr('id').split('-')[1]);
        });
        $('body').append(element);
    }
});

$（函数（）{
对于（变量i=0；i<10；i++）{
元素=$（''+i+''）；
元素。单击（函数（）{
警报（$（this.attr（'id'）.split（'-'）[1]）；
});
$（'body'）。追加（元素）；
}
});

你可以做两件事中的一件。可以使用div的内容输出is，也可以从选择器获取数组中的索引

这是内容的一个示例：

element.click(function() {
  alert($(this).text());
});

或用于索引：

element.click(function() {
  alert($('div').index(this));
});

---

我相信这两种方法都能奏效。你可以做两件事中的一件。可以使用div的内容输出is，也可以从选择器获取数组中的索引

这是内容的一个示例：

element.click(function() {
  alert($(this).text());
});

或用于索引：

element.click(function() {
  alert($('div').index(this));
});

---

我相信这两种方法都能像其他答案一样正确地使用闭包和破解。但这应该是

var元素=…

+1，以便正确使用闭包并像其他答案一样对其进行黑客攻击。但是这应该是

var-element=…

，虽然这看起来是可行的，但它忽略了正确使用闭包这一真实而简单的问题。问题不在于如何使用闭包。我不认为提供另一种解决方案来解决所问问题有什么问题。你是对的，问题不在于如何使用闭包，但闭包是合适的答案，并按照设计使用语言。不必要地访问DOM只是因为：不必要。虽然这看起来是可行的，但它忽略了正确使用闭包这一真实而简单的问题。问题不在于如何使用闭包。我不认为提供另一种解决方案来解决所问问题有什么问题。你是对的，问题不在于如何使用闭包，但闭包是合适的答案，并按照设计使用语言。不必要地访问DOM只是：不必要。这里真正的问题是不使用闭包。参见SLaks的答案。这里真正的问题不是使用闭包。请参见SLaks的答案。结果是10，并且始终是10，因为

i

是一个在for循环中迭代的变量。由于

i++

，它在循环结束时结束于10。您的问题更多的是从单击的div中提取一个有用的数字，还是将函数传递给事件处理程序时为什么

i

会这样做？结果是10，并且总是10，因为

i

是在for循环中迭代的单个变量。由于

i++

，它在循环结束时结束于10。您的问题更多的是从单击的div中提取一个有用的数字，还是在将函数传递给事件处理程序时，

i

为什么会这样做？