jQuery 事件处理程序的 JavaScript 闭包

Question

我有一个对象列表，每个对象都有一个 .bullet，它是一个 SPAN。我想将跨度上的单击绑定(bind)到处理程序，而不是使用 jQuery 对跨度执行特定操作。我看到一些我不明白的行为，所以我希望有人能解释发生了什么。基本上，第一个代码示例有效:

for (var i = 0 ; i< length ; i++) {

            (function(){
                dataNode = dataNodeList[i];

                var handler = function(e) {

                    e.data.node.bullet.firstChild.nodeValue = "- ";


                };


                $(dataNode.bullet).on("click",{node:dataNode},handler);


            })();

        }

但是，第二种变体不起作用:

for (var i = 0 ; i< length ; i++) {

            (function(){
                dataNode = dataNodeList[i];

                var handler = function() {

                    dataNode.bullet.firstChild.nodeValue = "- ";


                };


                $(dataNode.bullet).on("click",handler);


            })();

        }

在第二个例子中，

dataNode.bullet.firstChild.nodeValue = "- ";

对我想要的 SPAN 的值没有影响。由于 JavaScript 关闭，我希望 dataNode.bullet 仍指向我想要更改的 SPAN。那么，有人可以解释为什么这会失败吗？谢谢。

Answer 1

试试这个:

for (var i = 0 ; i< length ; i++) {
    (function(index){
        var dataNode = dataNodeList[index];

        var handler = function() {
            dataNode.bullet.firstChild.nodeValue = "- ";
        };

        $(dataNode.bullet).on("click",handler);
    })(i);
}

闭包定义了一个新的作用域。这是必要的，因为你的处理程序直到循环完成后才会被调用，所以 i 在它被调用时不在范围内，或者(在某些情况下)具有最后一个可能的值从循环。