javascript紧接上一张for循环的问题，我自己的理解

这类问题，通常都是在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保存iipt[i].onclick = (function (){var temp = i;return function(){alert(temp)}})()}//函数自定义属性//通过给每个函数都添加下标，在执行函数的时候，弹窗自己的下面//arguments.callee表示当前执行最近的一个函数,用this表示会弹窗undifinedfor(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>

转载于:https://www.cnblogs.com/bestsamcn/p/5206450.html

javascript紧接上一张for循环的问题，我自己的理解相关推荐

JS小练习：使用JavaScript实现点击‘上一张’，‘下一张’循环播放图片
代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
使用JavaScript实现图片轮播，上一张后一张，循环播放
轮播图在前端页面中经常用到,包括PC端和移动端. 我所写的轮播图的方法是在页面中设计好一张图片的位置,并且加上按钮"上一张","下一张","循环播放& ...
深入理解JavaScript的闭包特性如何给循环中的对象添加事件
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
Python爬虫利用18行代码爬取虎牙上百张小姐姐图片
Python爬虫利用18行代码爬取虎牙上百张小姐姐图片下面开始上代码需要用到的库 import request #页面请求 import time #用于时间延迟 import re #正则表达式 ...
利用js实现轮播图（上一张，下一张，选取第几张，动画等）
今天来说一下利用js实现轮播图效果思路 1.首先我们要把需要用到的元素获取过来 <div class="all" id='box'><div class=&qu ...
点击图片实现上一张下一张JS
用js实现.点击图片的左边,去上一张:点击图片的右边,去下一张. Jquery脚本在http://jquery.com/ 下载 Jquery实现比较简单 <script src="ht ...
Javascript 返回上一页
2019独角兽企业重金招聘Python工程师标准>>> 1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. ...
人类史上首张黑洞照片发布！
晓查发自纽凹非寺量子位报道 | 公众号 QbitAI 刚刚,天文学家公布了人类史上首张黑洞照片.这颗黑洞就是M87星系中心的超大质量黑洞,它的质量是太阳的65亿倍,距离地球5500万光年. ...
完善ext.grid.panel中的查询功能(紧接上一篇)
今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...

javascript紧接上一张for循环的问题，我自己的理解

javascript紧接上一张for循环的问题，我自己的理解相关推荐

最新文章

热门文章