JavaScript没有将变量写为数字(循环)

Question

我有这样的JavaScript代码,这总是给我一个问题

    for(var i=1;i<9;i++){
        document.getElementById('element'+i).onclick=function(){
             theFunc(i)
        }
    }

它选择正确的元素并添加onclick.但是,当我输入控制台时, document.getElementById('element1").onclick它返回theFunc(i)(不theFunc(1))

所以无论点击哪个元素,它总是会调用theFunc(9)(最后我是9)

我的代码出了什么问题？

Answer 1

事件处理函数有一个持久的参考来i,而不是它的值的副本,因为你已经发现.

为了防止这种情况,让函数关闭不会改变的其他东西:

for(var i=1;i<9;i++){
    document.getElementById('element'+i).onclick=makeHandler(i);
}

function makeHandler(index) {
    return function() {
        theFunc(index);
    };
}

makeHandler创建一个关闭的函数index,它是值的副本i,因此不会随着循环的继续而改变.每个事件处理程序都有自己的 index.

也就是说,创建一堆实际上相同的事件处理函数通常意味着你可以重新设计一下并只使用一个处理函数.例如,在这种情况下,您可以这样做:

for(var i=1;i<9;i++){
    document.getElementById('element'+i).onclick=theHandler;
}

function theHandler() {
    func(parseInt(this.id.replace(/\D/g, ''));
}

...从id元素中获取要使用的值.

另一种方法是委托,你实际上将click事件挂钩到一个祖先元素(所有这些元素都有共同点),然后当点击发生时,查看event.target它的祖先,看看你应该做什么.