这类问题，通常都是在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. MFC 创建选项卡

    1.创建三个选项卡Dialog窗体,ID分别改为porpTest1.porpTest2.porpTest3 2.创建三个选项卡类,类名分别为CPropTest1.CPropTest2.CPropTes ...

  2. Session生命周期讨论

    文章级别:Java初级    预备技能点:JSP内置对象, 监听器, 序列化           在程序开发的时候, request session appplication内置对象, 是用的比较多的 ...

  3. lazy loading img 图片延迟加载

    http://yunpan.cn/cVsjPW6dgbcsh (提取码:b5db)

  4. quartz spring 时间配置

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

  5. Hibernate学习笔记-Hibernate关系映射

    1. 初识Hibernate——关系映射 http://blog.csdn.net/laner0515/article/details/12905711 2. Hibernate 笔记8 关系映射1( ...

  6. WCF-NAT模式访问

    由于项目需求,第一次用wcf做基于internet的访问.整理一下自己的探索,作为总结,也供自己以后回顾. 要求:(1)wcf服务需要部署在internet之中. (2)双工通信. 出现问题: 根据上 ...

  7. Oracle RAC 环境下的连接管理

    http://blog.csdn.net/cyxlxp8411/article/details/7634003

  8. C# 代码转换到Python

    下载地址:http://pan.baidu.com/s/1dDAZJxv SharpDevelop 3.1 now supports converting C# and VB.NET code to ...

  9. Manacher算法----最长回文子串

    题目描述 给定一个字符串,求它的最长回文子串的长度. 分析与解法 最容易想到的办法是枚举所有的子串,分别判断其是否为回文.这个思路初看起来是正确的,但却做了很多无用功,如果一个长的子串包含另一个短一些 ...

  10. javaDay1 基础知识

    常用dos命令 •d: 回车  盘符切换 •dir(directory):列出当前目录下的文件以及文件夹 •md (make directory) : 创建目录 •rd (remove directo ...