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

考虑下面代码:

html 复制代码
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了(对于所有的元素)。

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

html 复制代码
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 就会调用时传进来的的当时值,这样在点击元素时,就能显示正确的序号。

相关推荐
Xy9103 分钟前
App Trace功能实战:一键拉起、快速安装与免提写邀请码的应用实践
前端
前端的日常3 分钟前
前端如何优化音频和视频的加载性能?
前端
是晓晓吖5 分钟前
在Next.js中,ISR是如何工作的?(译文)
前端
FogLetter5 分钟前
智能前端之拍照识别单词(下):AI集成与交互优化
前端·aigc·openai
yvvvy5 分钟前
# React Hooks 全面解析:从 useState 到 useEffect,掌握状态与副作用管理
javascript
满分观察网友z6 分钟前
告别平庸!我用 picker-view 造的这两个选择器,让产品经理闭嘴了
前端
jqq66612 分钟前
Vue3脚手架实现(七、渲染eslint配置)
前端·javascript·vue.js
Mintopia14 分钟前
BVH:光线追踪里的空间管家
前端·javascript·计算机图形学
Mintopia20 分钟前
Three.js 射线拾取原理:像素世界的侦探故事
前端·javascript·计算机图形学
Zhen (Evan) Wang22 分钟前
(豆包)xgb.XGBRegressor 如何进行参数调优
开发语言·python