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元素的编号（即，如果用户单击标有“4”的div元素，警告弹出窗口应显示数字4）。

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

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

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

我相信两者都应该有效

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

3 个答案: