在循环内错误使用函数定义(js的问题)

简介: 在循环内错误使用函数定义(js的问题)

考虑下面代码:

var elements = document.getElementsByTagName('input');
var n = elements.length;    // Assume we have 10 elements for this example
for (var i = 0; i < n; i++) {
    elements[i].onclick = function() {
        console.log("This is element #" + i);
    };
}

根据上面的代码,如果有10input 元素,点击任何一个都会显示 "This is element #10"。 这是因为,当任何一个元素的onclick被调用时,上面的for循环已经结束,i的值已经是10了(对于所有的元素)。

我们可以像下面这样来解决这个问题:

var elements = document.getElementsByTagName('input');
var n = elements.length;   
var makeHandler = function(num) { 
     return function() {  
         console.log("This is element #" + num);
     };
};
for (var i = 0; i < n; i++) {
    elements[i].onclick = makeHandler(i+1);
}

makeHandler 是一个外部函数,并返回一个内部函数,这样就会形成一个闭包,num 就会调用时传进来的的当时值,这样在点击元素时,就能显示正确的序号。

相关文章
|
缓存 JSON tengine
CDN 预热功能| 学习笔记
快速学习 CDN 预热功能。
|
12月前
|
机器学习/深度学习 数据可视化 PyTorch
深入解析图神经网络注意力机制:数学原理与可视化实现
本文深入解析了图神经网络(GNNs)中自注意力机制的内部运作原理,通过可视化和数学推导揭示其工作机制。文章采用“位置-转移图”概念框架,并使用NumPy实现代码示例,逐步拆解自注意力层的计算过程。文中详细展示了从节点特征矩阵、邻接矩阵到生成注意力权重的具体步骤,并通过四个类(GAL1至GAL4)模拟了整个计算流程。最终,结合实际PyTorch Geometric库中的代码,对比分析了核心逻辑,为理解GNN自注意力机制提供了清晰的学习路径。
769 7
深入解析图神经网络注意力机制:数学原理与可视化实现
|
11月前
|
Ubuntu Linux
Ubuntu中dpkg和apt命令:debian包安装详解
希望这让你对于Ubuntu中的dpkg和apt命令有了更为清晰的理解。下次你面对软件包安装的问题,就可以轻松应对,优雅地在你的Linux系统中游刃有余了。
1176 10
|
安全 数据中心
|
运维 Linux 开发工具
第22篇 如何部署gitLab进行开发版本控制
第22篇 如何部署gitLab进行开发版本控制
|
SQL 索引
使用 explain 如何判断二级索引使用后是否回表?
如何使用 explain 判断二级索引使用后,是否存在回表操作?
503 0
|
Web App开发 JavaScript 前端开发
ChatGPT与基于GUI的自动化测试
ChatGPT与基于GUI的自动化测试,chrome浏览器+ cypress +HTML代码需要主机名脚本语言和测试目标的URL。
256 10
|
监控 安全 中间件
Python Django 后端架构开发: 中间件架构设计
Python Django 后端架构开发: 中间件架构设计
398 1
|
iOS开发
iOS 最完整小说阅读器(Swift-Demo)
iOS 最完整小说阅读器(Swift-Demo)
877 0