js常见问题之为什么点击弹出的i总是最后一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for</title>
<style type="text/css">
li{
height:50px;
}
</style>
</head>
<body>
<ol>
<li></li>
<li></li>
</ol>
<script>
var btn = document.getElementsByTagName('li'); for(var i = 0;i<2;i++){
btn[i].onclick = function(){
alert(i+1);
};
} </script>
</body>
</html>
分析：
i = 0时,btn[0].onclick = function(){alert(i+1)}
i = 1时,btn[1].onclick = function(){alert(i+1)}
i = 2时，不满足条件跳出循环.
在执行click的函数的时候，会有一个作用域链，这个作用域链是一个对象列表，这组对象定义了代码作用域中的变量。（ 关于变量对象的内容想更详细了解的可以查看变量对象。）当我们alert(i)的时候，会去从内到外的去寻找变量i。这个时候这个函数的作用域链上有两个对象，这时循环已经结束了，i此时的值为2.所以点击任何一个li，弹出的都是2，而不是我们想要的索引值。重点在于弹出的是变量i，变量i，变量i。重要的事情说三遍。
那么问题来了，我们要如何解决这个问题呢。我们需要做的就是在每次给aLi[i]绑定事件的时候，将这个时候i的值保存在内部的作用域中。解决方案如下。
var btn = document.getElementsByTagName('li');
for(var i = 0;i<4;i++){
(function(i){
btn[i].onclick = function(){
alert(i+1);
};
})(i)
}
i = 0时,
(function(i){
btn[0].onclick = function(){
alert(i+1);
}
})(0)
i = 1时,
(function(i){
btn[1].onclick = function(){
alert(i+1);
}
})(1)
i = 2时，不满足条件跳出循环.
由于多了一层自执行函数的包裹，当我们点击li时，会有三层的作用域，从内带外分别是：click函数内部的变量对象，自执行函数的变量对象和最外层的window对象。查找到第二层的时候，找到了i，自执行函数的i等于传入的参数值，相对应的存下了当时i的值，所以就弹出了相应的索引值。
js常见问题之为什么点击弹出的i总是最后一个的更多相关文章
- 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏
function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...
- JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片
1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- js点击弹出div层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 点击弹出 +1放大效果 -- jQuery插件
20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...
- jQuery之点击弹出图标环形菜单
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- jquery---点击弹出层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery点击弹出层，弹出模态框，点击模态框消失
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- jQuery第二课 点击弹出一个提示框
选择器允许您对元素组或单个元素进行操作. jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元 ...
- Javascript实现图片点击弹出
一直想给安装一个缩略图点击弹出的插件,但是找了找几乎都是用的php来做的,插件的使用和安装极其繁琐,于是上网查了些demo,自己实现了一个纯js的图片弹出插件. 实现的思路是通过编写hook图片的on ...
随机推荐
- mongodb与mysql的命令对比
mongodb与mysql命令对比 传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成,MongoDB是由数据库(database).集合(col ...
- 基于DirectShow和FFmpeg的USB摄像头监控软件-转
第一个版本 ### 软件版本及实现功能 0.0.1 1. USB摄像头枚举和设备信息获取2. 实时视频观看3. 24小时不间断录像,录像文件支持暴风影音播放 ### 软件说明: 软件基于 Direct ...
- Arc066_E Addition and Subtraction Hard
传送门 题目大意 给定一个加减法的表达式,让你任意的添加合法的括号对,使的表达式最大. 题解 考虑到任意左括号一定加在减号右边,那么对于第一个左括号,与该左括号相邻的只含有加号的子序列的贡献一定为负, ...
- Arc082_F Sandglass
Description有一个沙漏由两个上下相通玻璃球$A$和$B$构成,这两个玻璃球都含有一定量的沙子,我们暂且假定$A,B$中位于上方的玻璃球的为$U$,下方的玻璃球为$L$,则除非$U$中没有沙子 ...
- bzoj1067降雨量
True和False都好搞 Maybe的情况: 1.Y年和X年的降雨量已知,X年的降雨量不超过Y年的降雨量,从Y+1到X-1年中存在至少一年的降雨量未知,从Y+1到X-1年中已知的降雨量都小于X年的降 ...
- UML图之例图
用例图主要说明的是谁要使用系统,以及他们使用该系统可以做些什么,帮助开发团队以一种可视化的方式理解系统的功能需求. 一个用例图包含了多个模型元素,如系统.参与者和用例,并且显示这些元素之间的各种关系, ...
- 冷备手工完全恢复（recover database，recover tablespace，recover datafile）
冷备手工完全恢复 1. 手工完全恢复三种级别: recover database: 所有或大部分datafile丢失,一般是在mount状态完成.recover tablespace: 非关 ...
- BZOJ4010：[HNOI2015]菜肴制作
我对贪心的理解:https://www.cnblogs.com/AKMer/p/9776293.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem ...
- 【转】Pro Android学习笔记（二五）：用户界面和控制（13）：LinearLayout和TableLayout
目录(?)[-] 布局Layout 线性布局LinearLayout 表格布局TableLayout 布局Layout Layout是容器,用于对所包含的view进行布局.layout是view的子类 ...
- LInux在线安装JDK
1.查找Java相关列表: [root@localhost ~]# yum -y list java* 2.使用root用户安装安装时提醒必须使用root用户,sudo都不行. [root@local ...