javascript - .click() 回调从调用方法引用局部变量，而不是按值复制

Question

以下 jQuery Javascript 代码包含在原本为空的页面上。

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

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

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

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

Answer 1

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

例如：

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);
    }
});

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

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

Answer 2

通常我将数字隐藏在 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);
    }
});

Answer 3

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

这是内容的示例：

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

或者对于索引：

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

我相信两者都应该工作