这类问题，通常都是在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. include子页面传递过来的参数传递到后台

    在页面上可以使用 ${param.moduleId}来获取 在判断中也可以使用${param.moduleId == "test" ? "1":"2& ...

  2. css部分总结

    10.19HTML总结 1.<!DOCTYPE HTML>声明:告知浏览器文档使用哪种HTML或者XHTML规范,该标签可声明三种DTD(文档类型定义)类型:严格版本.过渡版本以及基于框架 ...

  3. js_day2

    1)<script src="dsad.js"> 不是  scr= 2)

  4. Sicily 2005.Lovely Number

    题目地址:2005.Lovely Number 思路: 若测试数据出现的次数为奇数,则输出它. 所以,可以先排序,若前后相等,前后都设为0,最后不为0的则可以输出. 具体代码如下: #include ...

  5. 让IE支持CSS3 Media Query实现响应式Web设计

    如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况 ...

  6. 直播 linux上的第一个c++程序

    这里用crt来直播吧: 登录到服务器上之后: 1.mkdir -p 建一个文件夹 2.ll 查看一下这个文件夹 3.cd 进入这个文件夹 4.vim 进行文本编辑 写完之后,按下esc中止输入模式,用 ...

  7. ROC曲线和PR曲线

    转自:http://www.zhizhihu.com/html/y2012/4076.html分类.检索中的评价指标很多,Precision.Recall.Accuracy.F1.ROC.PR Cur ...

  8. angularJs项目实战！03：angularjs与其他类库的协作

    引言:angularjs是一个中等重量级的前端开发框架 HTML是一门很好的为静态文本设计的语言,但要构建动态的web应用它就显的乏力了.通常,我们使用以下技术来解决静态网页技术在构建动态应用上的不足 ...

  9. Effective Java Item4:Enforce noninstantiability with a private constructor

    Item4:Enforce noninstantiability with a private constructor 通过构造私有化,禁止对象被实例化. public class UtilClass ...

  10. POJ 1755 Triathlon

    http://poj.org/problem?id=1755 题意:铁人三项,每个人有自己在每一段的速度,求有没有一种3条路线长度都不为0的设计使得某个人能严格获胜? 我们枚举每个人获胜,得到不等式组 ...