这类问题，通常都是在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. CSS投影实现方式

    备用素材: 1.png    shadow.png 第一种方式: 利用负边距实现 最终效果图: <!DOCTYPE html> <html lang="en"&g ...

  2. AngularJs练习Demo13Provider_factory

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  3. tomcat 远程 调试 eclipse

    windows系统: 修改catalina.bat   端口9000 SET CATALINA_OPTS=-server -Xdebug -Xnoagent -Djava.compiler=NONE ...

  4. php 之 PDO数据访问抽象层(0513)

    PDO(PHP Data Objects)是一种在PHP里连接数据库的使用接口. PDO与mysqli曾经被建议用来取代原本PHP在用的mysql相关函数, 基于数据库使用的安全性,因为后者欠缺对于S ...

  5. php基础之三 数组

    一.正则表达式: 1. "/"代表界定符, "^"代表开始符号 "&"结束符号 eg:   $reg="/(13[0-9] ...

  6. Quick Sort In-place Implementation

    在线运行PHP http://www.compileonline.com/execute_php_online.php <?php function swap( &$a, &$b ...

  7. quartz spring 时间配置

    关于时间配置, 1前面带0和不带0的区别是???   (开始时间,带0以整点整分整秒开始,不带的以启动时间定时循环??) 比如 0 7/37 * * * ?  表示每个小时的第7分钟开始执行,然后隔三 ...

  8. SPI协议总结

    四种工作模式: Mode 0 CPOL=0, CPHA=0 Mode 1 CPOL=0, CPHA=1Mode 2 CPOL=1, CPHA=0 Mode 3 CPOL=1, CPHA=1 常使用Mo ...

  9. 【Beta】Phylab2.0: Postmortem

    设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 主要解决同学们写物理实验报告时,处理数据的困难--巨大的计算量和不规范的物理报告数据处理格式.典型 ...

  10. Javascript quiz

    作为一个勤劳的corder,在大年三十的前一天还留守在公司的最前线.百无聊赖中看到一套关于js的测试题,测试过后发现有些题还是有很大的意义,至少能够让我门对js基础有所重视.本人将每道题的考察点总结了 ...