Question

以下代码在<body id="container" />下创建了10个元素。当我点击任何元素时，我总是会看到一个值为10的警报。

如何让每个警报显示每个元素的索引？

for (var i = 0; i < 10; ++i) {
  var id = "#element_" + i;
  $("#container").append('<p id="element_' + i + '">foo</p>');
  $(id).click(function (e) {
    alert(i);
  });
}

Answer 1

您需要关闭或只需使用$.on()数据：

for (var i = 0; i < 10; ++i) {
  var id = "#element_" + i;
  $("#container").append('<p id="element_' + i + '">foo</p>');
  $(id).on("click", i, function (e) { alert(e.data); });
}

Answer 2

不要在for循环

中创建函数

for (var i = 0; i < 10; ++i) {
  $("#container").append('<p id="element_' + i + '">foo</p>');
}

$("#container > p").click(function (e) {
    var idNum = this.id.split('_')[1];
    alert(idNum); // 0, 1, 2 ...
});

<强> DEMO

Answer 3

需要创建一个私有闭包

for (var i = 0; i < 10; ++i) {
    (function(idx){
        var id = "#element_" + idx;
        $("#container").append('<p id="element_' + idx + '">foo</p>');
        $(id).click(function (e) {
            alert(idx);
        });
    })(i)
}

演示：Plunker

在Javascript闭包中捕获计数器值

3 个答案: