这类问题，通常都是在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. Spring框架快速入门之简介

    Spring是java平台上的一个开源应用框架.它的第一个版本是由Rod Johnson写出来的.Rod在他的Expert One-On- One Java EE Design and Develop ...

  2. (转)SQL Server 2008怎样编辑200行以上的数据

    刚换SQL Server2008 不久,感觉运行速度.编辑提示都比05版的提升不少,但是在维护考试系统中遇到一个05中没有的问题:05中有“打开表”可以编辑所有数据行,到了08变成了“打开前1000行 ...

  3. javascript:Array.slice.call 到Array.prototype.slice.call

    举个从对象到数组的例子: var obj={}; obj[1]=1; obj[2]=2; obj.length=2; var arr =Array.prototype.slice.call(obj); ...

  4. angular ng-bind-html 对src路径失效 解决方案

    json内容 ;<img src="/newsfile/1506271512489.jpg" width="600" height="450&q ...

  5. 10 条建议让你创建更好的 jQuery 插件

    在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行了. ...

  6. mysql foreign key 外键

    ALTER TABLE `fd_rel_customer_doctor` ADD CONSTRAINT `FK_fd_rel_customer_doctor_1` FOREIGN KEY (`CUST ...

  7. Redis VS Memcached 转载

    引子: 在大数据时代,总希望存在一个Key-value存储机制,像HashMap一样在内存中处理大量(千万数量级)的key-value对,以便提高数据查找.修改速度. 所以,我们会想到,Memcach ...

  8. Python -- 大小写转换

    #小写转大写 strs = 'abcd' strs = strs.upper() print u'abcd小写转大写:', strs #大写转小写 strs = 'ABCD' strs = strs. ...

  9. Jasper_crosstab_group _Error incrementing crosstab dataset

    error detail: net.sf.jasperreports.engine.JRException: net.sf.jasperreports.engine.JRRuntimeExceptio ...

  10. 为什么ELF文件的加载地址是0x8048000

    在一个进程的虚拟地址空间中,ELF文件是从0x8048000这个地址开始加载的,为什么会是这个地址? 回答:用命令ld --verbose可以看到0x08048000,ld的默认脚本用这个地址作为EL ...