这类问题，通常都是在for循环里，根据i的变化作为dom的下标来作当前dom的点击事件，

预期是，每个点击事件都对应相应的i下标，但是问题是，每次点击的都是最后一次节点的dom。

原因就是其实我们作点击事件的时候，for循环已经执行完毕了。

而且i如果没得到相应的保存，就只会为循环的最后一个值。

做了一共6中方法，大概分为两个范畴，

第一个是设置自定义属性，这个可以包括dom的自定义属性和函数的自定义属性；

第二个是利用闭包空间，来让i保存在闭包空间中的变量中；

上代码

html：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

</head>

<body>

<form>

	<input type = "text" value ="1212">

	<input type = "text" value ="1212">

	<input type = "text" value ="1212">

	<input type = "text" value ="1212">

	<input type = "text" value ="1212">

</form>

</body>

</html>

javascript：

<script type="text/javascript">

    var form = document.getElementsByTagName('form')[0];

    var ipt = form.getElementsByTagName('input');

    //自定义属性

    for(var i = 0 ; i < ipt.length ;i++){

    	ipt[i].index = i ;

    	ipt[i].onclick = function(){

    		alert(this.index);

    	}

    }

     //下面很多方法都是通过闭包空间来解决的

     //闭包就是内部函数的外部函数被其之外的变量调用时便产生了一个闭包空间

     //闭包空间的变量不会被销毁，直到闭包空间的内部函数全部执行完毕

     //要清楚，闭包空间作为外部函数一定要被调用，才会产生闭包，若外部函数（闭包空间）没被调用，内部函数就不会被调用

    //闭包空间保存

	for(var i = 0 ; i < ipt.length ; i++){

		//以下自我执行函数为闭包空间

		//形参arg保存实参i的值，直到循环结束

        ipt[i].onclick = (function(arg){

        	return function(){

        		alert(arg);

        	}})(i);

	}

    //说到底都是闭包空间保存变量的作用，只要在内部函数外部顶一个函数

    //因为内部函数依赖外部函数的变量（参数），所以如果内部函数没有执行完成，赖以生存的外部函数

    //就不会被js的gc机制销毁，虽然作用链已断

    for(var i = 0 ; i < ipt.length ;i++){

    	//以下为闭包空间

    	//arg保存i

    	//跟前面的方法差不多，都是传参完成，通过形参保存实参

    	function al(arg){

	    	ipt[arg].onclick = function(){

	    		alert(arg);

	    	}

    	}

    	al(i)

    }

    //这种方法和arg传参才不多，只不过讲参数，作为闭包空间的内部参数存在

    //另外其实参数和函数内部的变量差不多的存在

	for(var i = 0 ; i< ipt.length ;i++){

		//以下为闭包空间

		//用temp保存i

		ipt[i].onclick = (function (){

			var temp = i;

			return function(){

				alert(temp)

			}

		})()

	}

	//函数自定义属性

	//通过给每个函数都添加下标，在执行函数的时候，弹窗自己的下面

	//arguments.callee表示当前执行最近的一个函数,用this表示会弹窗undifined

	for(var i = 0 ; i< ipt.length ;i++){

		(ipt[i].onclick = (function (){

				alert(arguments.callee.i)

		})).i = i;//这里声明的是函数的下标

	}

	//又是闭包空间

	//有些眉目了么

	for(var i = 0 ;i < ipt.length ;i++){

	    //以下为闭包空间，一定要记得，闭包空间的函数一定要执行

	    //通过temp来保存i，但是temp又被内部函数调用，所以temp不会马上被销毁

		(function(){

			var temp = i ;

			ipt[i].onclick = function(){

				alert(temp);

			}

		})()

	}

</script>

　　

javascript紧接上一张for循环的问题，我自己的理解的更多相关文章

  1. 深入理解JavaScript的闭包特性如何给循环中的对象添加事件

    初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...

  2. 细说JavaScript对象(4)： for in 循环

    如同 in 运算符一样,使用 for in 循环遍历对象属性时,也将往上遍历整个原型链. // Poisoning Object.prototype Object.prototype.bar = 1; ...

  3. 《你不知道的JavaScript（上）》笔记——let和const

    笔记摘自:<你不知道的JavaScript(上)>第3章 函数作用域和块作用域 let 1.let 关键字可以将变量绑定到所在的任意作用域中 2.let 为其声明的变量隐式地劫持了所在的块 ...

  4. javascript异步上传压缩图片并立即显示图片

    javascript异步上传压缩图片并立即显示图片<pre><!doctype html><html><head><meta charset=&q ...

  5. JQuery，JS图片操作（上一张，下一张，旋转，放大，缩小）

    1.html代码:我是从数据库获取图片路径. <div id="divprint" align="center"> @{DataTable dt = ...

  6. JavaScript中让Html页面中循环播放文字

    JavaScript中让Html页面中循环播放文字 <html> <head> <meta http-equiv="Content-Type" con ...

  7. 几款极好的 JavaScript 文件上传插件

    文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...

  8. JavaScript返回上一页代码区别

    JavaScript返回上一页代码区别: window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行刷新的话就是:win ...

  9. 完善ext.grid.panel中的查询功能(紧接上一篇)

    今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...

随机推荐

  1. csv 导入到 access中去

    Csv中有500万数据,导入到Access中去,每6万条数据为1Table 先是参照着http://support.microsoft.com/kb/257819/zh-cn来写 1.找不到可安装的  ...

  2. iOS_SN_UITableView的优化

    1.提前计算并缓存好高度(布局),因为heightForRowAtIndexPath:是调用最频繁的方法. 2.异步绘制,遇到复杂界面,遇到性能瓶颈时,可能就是突破口. 3.滑动时按需加载,这个在大量 ...

  3. winform托盘时，要运行一个实例，解决办法

    需求:winform应用程序,当隐藏到托盘时,再次运行exe程序,让其只运行一个实例,并且把窗口从托盘中显示出来 应用程序名可以通过下面代码,获取到: Process current = Proces ...

  4. C#string与char互转

    string s = "asdf"; //字符转char char[] c = s.ToCharArray(); Console.WriteLine(s[]); //char转st ...

  5. O、Ω、Θ表示

    转载,原网址为:http://book.2cto.com/201211/8127.html 对于任何数学函数,这三个记号可以用来度量其“渐近表现”,即当趋于无穷大时的阶的情况,这是算法分析中非常重要的 ...

  6. JS 匿名函数

    一.声明: 1. 正常函数声明: //正常函数声明 function foo(p1, p2){ return p1+p2; } 2. 匿名函数声明: //匿名函数声明 var foo= functio ...

  7. linux 下使用crontab+wget实现秒及定时任务

    输入命令 crontab -e 打开一个文件,默认的编辑器为vi. 输入vi编辑器,输入i为插入,输入w保存,q退出,!强制.wq!强制保存并退出. * * * * * /usr/bin/wget - ...

  8. 标准程序员系列－Github篇－初始化一个代码仓库

    下面将一步步介绍怎样使用GitHub来初始化一个项目的版本控制仓库: 1. 到GitHub上注册自己的账号:https://github.com/ 2. 创建第一个代码仓库一个仓库相当于一个项目的代码 ...

  9. C语言初学 求100到200的全部素数

    #include<stdio.h> #include<math.h> int main() { int m,i,k; for(m=101;m<=200;m=m+2) { ...

  10. gcc-gdb

    1.使用gdb ,习惯了cgdb ,加上了vim. 调试发现,使用了stl,不知如何查看使用的vector,stack等中的值,来吧.gdb-std-views.下载 1)下载好之后,mv stl-v ...