Question

在处理循环内生成的HTML加上事件处理时遇到了范围问题。

想象一下这种情况

# var container=$('#someContainerId');

_buildField=function(index){
    return $('<div/>').data('index', index);
};

for(var i=1; i<=10; i++){
    container.append( $('<div/>').on('click', function(){
        _buildField(i);
    } );
}

在此示例中，_buildField()将始终收到值10，无论点击哪个div元素。

老实说，我认为这是不同的，但我们再来一次，学习新的东西。

问题

我如何确保将正确的值（i中存储的当前迭代）传递给_buildField()？

Answer 1

<强> ES6

如果您可以使用ES6，则选择let代替var可能会有所帮助。

<强> ES5

由于您说您需要使用ES5，因此应用IIFE模式可以解决您的问题。这是一个人为的例子：

for(var i=1; i<=10; i++) {
    (function (i) {
        setTimeout(function () {
            console.log(i);
        }, 0);
    })(i);
}

根据您的具体情况调整上述内容应该导致：

for(var i=1; i<=10; i++) {
    (function (i) {
        container.append( $('<div/>').on('click', function(){
            _buildField(i);
        });
    })(i);
}

如何在嵌套在循环中的函数调用中维护适当的变量范围/值

1 个答案: