JavaScript 不将变量写为数字(循环）

JavaScript not writing variable as number (loop)

本文关键字：数字 循环 变量 JavaScript      更新时间：2023-09-26

我有这样的javascript代码，这总是给我一个问题

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

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

所以无论点击哪个元素，它都会永远调用theFunc(9)(最后我是9(

我的代码有什么问题？

您的事件处理程序函数具有对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事件挂接到祖先元素(所有这些 elementX 都有一个共同点(，然后在单击发生时，查看event.target及其祖先以查看您应该做什么。

TJ Crowder的回答是解决您问题的最佳方法。您在闭包中遇到的这个"问题"在许多语言中都是设计使然，称为范围。

以下是对 JavaScript 中不同作用域(包括闭包(以及如何使用它们的良好解释。http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/

当你说theFunc(i)时，你是在围绕i创建一个闭包，这样每个函数调用都引用同一个变量。您需要将函数包装在外部闭包中，以确保每个函数调用都使用唯一的变量：

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