如何获取变量's设置元素时的文字值's onclick处理程序

How to get a variable's literal value when setting an element's onclick handler via jQuery?

本文关键字：文字 onclick 程序 处理 元素 设置 变量 何获取 获取      更新时间：2024-05-25

有没有办法将文本值传递到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"等。

每个div元素5个，单击后，将文本"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);

问题是，当您单击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);
    }
});

在追加之前，不需要添加用于分配文本属性的点击处理程序。

此外，您不应该在循环中附加相同的事件。绑定应该对所有事件都有效的单个事件。这可以通过两种方式实现：

1） 在附加后绑定单击事件

2） 或使用事件委派。

for (var i = 0; i < texts.length; i++) {
    var div = $("<div>");
    div.text(texts[i]); // <---- problem here
    console.log(texts[i]);
    $("#container").append(div);
}
$("#container div").click(function(){
   console.log($(this).text());
});

工作演示

相关文章：