问: i 会输出什么?改写成闭包的写法?

<a href="javaScript:void(0)">a</a>
<a href="javaScript:void(0)">b</a>
<a href="javaScript:void(0)">c</a> <script type='text/javascript'>
var arr = document.getElementsByTagName('a');
for(var i=0;i<arr.length;i++) {
arr[i].onclick = function() {
console.log(this + '我是第'+ i +'几个');
}
}
</script>

答:全部输出都是”我是第3个“

闭包写法可解决问题

<a href="javaScript:void(0)">a</a>
<a href="javaScript:void(0)">b</a>
<a href="javaScript:void(0)">c</a> <script type='text/javascript'> var arr = document.getElementsByTagName('a');
for(var i=0;i<arr.length;i++) {
(function(i,v){
v.onclick = function() {
console.log(this + '我是第'+ i +'个');
}
})(i,arr[i])
}
</script>

js的一个有意思的小题,闭包解决getElementByTagName的for循环绑定事件错误问题的更多相关文章

  1. JavaScript利用闭包循环绑定事件

    我们经常在做前端面试题的时候,会遇到循环绑定事件后,输出打印结果,很多人总是搞不清楚,今天借此机会跟大家梳理一下闭包相关作用. 1.首先我们举一个简单的例子. html部分: <a href=& ...

  2. php 有意思的小题

    /** * 你的是一个数字和一个字符串进行比较,PHP会把字符串转换成数字再进行比较.* PHP转换的规则的是:若字符串以数字开头,则取开头数字作为转换结果,若无则输出0.***/1)$a =”abc ...

  3. 用js写一个贪吃蛇小游戏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 移动web开发中自己遇到的三个小题及解决方法

    大家好! 这是我第二次写随笔感想,有不足之处希望大家提出,我也算的上一个小白,自己进入前端行业也刚刚半年,在这里半年里我遇到一个技术大牛的好领导,让我在项目中学到很多,想和大家分享一下! 一. 移动端 ...

  5. creator cocos2d-js-min.js 文件廋身 变小 太大解决方法

    使用的 cocos creator 1.2 版本, 菜单栏 项目 -- 项目设置 -- 模块设置 里面 把不要的模块去掉

  6. for循环绑定事件,闭包思想!

    1.选项卡问题 总结:用alert()测试,是否得到对象. 2.闭包,解决作用域. <script> window.onload=function(){ var li=document.g ...

  7. 【小记录】解决链接libcufft_static.a库出现的错误

    程序中使用了 cv::cuda::dft() 函数,需要在链接的时候使用libcufft_static.a这个库.链接出现大量类似错误:error: undefined reference to __ ...

  8. js闭包解决多个点击事件

    <script> var severalObj=window.document.getElementsByName("button"); for(var i=0;i&l ...

  9. javascript闭包传参和事件的循环绑定

    今天看到一个javascript的题目,按常理循环绑定事件,但是得到的结果却不是想要的. <a href="#">text</a><br>< ...

随机推荐

  1. Linux学习、Mongodb部署 踩到的坑学习

    一.安装Centos 7虚拟机系统 1.系统安装 下载阿里云的镜像,下载后安装,默认全程图形界面:虚拟机使用Win10自带的Hyper:碰到的坑记录下 1.在Hyper加载镜像启动的时候,提示“虚拟机 ...

  2. 浏览器解析js和type判断数据类型

    ### 浏览器解析: - 1.当浏览器(内核.引擎)解析和渲染js的时候,会给js提供一个运行的环境,这个环境叫做“全局作用域(后端global / 客服端window scope)” - 2.代码自 ...

  3. SQL Server MERGE(合并)语句

    如何使用SQL Server MERGE语句基于与另一个表匹配的值来更新表中的数据.  SQL Server MERGE语句 假设有两个表,分别称为源表和目标表,并且需要根据与源表匹配的值来更新目标表 ...

  4. cisco ap客户端无规律掉线

    设备 cisco air-ct2504-50-k9 cisco air-ap1832I-H-k9 首先根据这个帖子 https://community.cisco.com/t5/other-wirel ...

  5. PHP设计模式 - 访问者模式

    访问者模式是一种行为型模式,访问者表示一个作用于某对象结构中各元素的操作.它可以在不修改各元素类的前提下定义作用于这些元素的新操作,即动态的增加具体访问者角色. 访问者模式利用了双重分派.先将访问者传 ...

  6. status 和 typedef

  7. day07——数据类型补充、坑、二次编码

    day07 数据类型补充 str 首字母大写:capitalize() name = 'alex' name1 = name.capitalize() print(name1) 每个单词首字母大写:t ...

  8. 74HC573锁存器应用(附英文手册)

    锁存器(LATCH)概念 锁存器(Latch)是一种对脉冲电平敏感的存储单元电路,它们可以在特定输入脉冲电平作用下改变状态. 锁存,就是把信号暂存以维持某种电平状态. 锁存器作用: 缓存 完成高速的控 ...

  9. Ideaui和WebStrom2019最新版自动生成破解码

    http://idea.medeming.com/jet/ 直接点击下载 6ZUMD7WWWU-eyJsaWNlbnNlSWQiOiI2WlVNRDdXV1dVIiwibGljZW5zZWVOYW1l ...

  10. K8s-yaml的使用及命令

    YAML配置文件管理对象 对象管理: # 创建deployment资源 kubectl create -f nginx-deployment.yaml # 查看deployment kubectl g ...