javascript - 通过 jQuery 设置元素的 onclick 处理程序时如何获取变量的文字值？

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 8 年前。

有没有办法能够获取传递给 click() 函数的文字值？

<script>
var texts = ['t1', 't2', 't3', 't4', 't5'];

$(document).ready(function () {
    for (var i = 0; i < texts.length; i++) {
        var div = $("<div>");
        div.click(function () {

            div.text(texts[i]); // <---- problem here
            console.log(texts[i]); //   with texts[i]
        });

        $("#container").append(div);
    }
});
</script>

<div id="container"></div>

预期结果:

5 个 div 元素，每个元素分别包含文本“t1”、“t2”等

每个 5 个 div 元素，单击时将文本“t1”、“t2”等输出到控制台。

替代解决方案 1:

$(document).ready(function () {
    for (var i = 0; i < texts.length; i++) {
        var div = $("<div>");
        div.click({index: i}, function (e) {
            div.text(e.data.index);
            console.log(e.data.index);
        });

        $("#container").append(div);
    }
});

替代解决方案 2:

可以添加一个函数来设置 onclick 事件处理程序中的文本:

function setClick(elem, text) {
    elem.click(function () { console.log(text); });
}

这样div.click( ... );替换为:

setClick(div, i);

Answer 1

问题是当你点击div时，此时i的值为5，因此你不会得到任何结果。您应该在此函数中使用 IIFE 并包装单击调用。像这样

$(document).ready(function () {
    for (var i = 0; i < texts.length; i++) {
        var div = $("<div>");
        div.click((function () {

            div.text(texts[i]); // <---- problem here
            console.log(texts[i]);
        })(i));

        $("#container").append(div);
    }
});