我们在写web页面时，肯定会经常遇到下面这种情况：

<body>

<div class="btns-wrapper"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

var wrapper = $('.btns-wrapper');

for(var i = 0; i < 5; i++){

	var btn = $('<button>按钮' + i + '</button>').appendTo(wrapper);

	btn.on('click', function(evt){

		console.log('点击按钮：' + i);

	});

}

</script>

</body>

代码很简单，就是在页面上创建几个按钮，同时定义按钮的点击事件

可当点击按钮时，我们发现获取到的序号一直都是5，也就是 i 最后的值。

这是因为定义click事件时的匿名函数所引用的都是同一个变量 i

解决办法1：立即执行

var wrapper = $('.btns-wrapper');

for(var i = 0; i < 5; i++){

	var btn = $('<button>按钮' + i + '</button>').appendTo(wrapper);

	//默认方法

	//btn.on('click', function(evt){

	//	console.log('点击按钮：' + i);

	//});

	//方法1：立即执行

	btn.on('click', (function(n){

		return function(evt){

			console.log('点击按钮：' + n);

		}

	})(i));

}

这种方式就是在定义事件时直接为每个按钮都创建了一个独立的匿名函数（闭包），并且每个函数都持有正确的 i 变量

解决办法2：利用jquery的事件传参

var wrapper = $('.btns-wrapper');

for(var i = 0; i < 5; i++){

	var btn = $('<button>按钮' + i + '</button>').appendTo(wrapper);

	//默认方法

	//btn.on('click', function(evt){

	//	console.log('点击按钮：' + i);

	//});

	//方法2：利用JQuery的事件传参

	btn.on('click', { i: i }, function(evt){

		console.log('点击按钮：' + evt.data.i);

	});

}

这种办法就简单多了，直接利用jquery将参数体传递给匿名函数即可。

解决办法3：利用dom的data属性

var wrapper = $('.btns-wrapper');

for(var i = 0; i < 5; i++){

	var btn = $('<button>按钮' + i + '</button>').appendTo(wrapper);

	//默认方法

	//btn.on('click', function(evt){

	//	console.log('点击按钮：' + i);

	//});

	//方法3：利用dom的data属性

	btn.data('i', i);

	btn.on('click', function(evt){

		console.log('点击按钮：' + $(this).data('i'));

	});

}

这种方法也很简单，弊端就是无法利用data属性定义结构化的数据。

综合来看，如果是jquery环境，利用事件参数来转递变量是最简单的，而且可以传递结构化的数据。

否则只能通过立即执行（闭包）的方式。

JavaScript中子函数访问外部变量的方法的更多相关文章

  1. ios中block访问外部变量的一些注意点

    Block类型是一个C级别的语法和运行机制.它与标准的C函数类似,不同之处在于,它除了有可执行代码以外,它还包含了与堆.栈内存绑定的变量.因此,Block对象包含着一组状态数据,这些数据在程序执行时用 ...

  2. javascript中函数声明、变量声明以及变量赋值之间的关系与影响

    javascript中函数声明.变量声明以及变量赋值之间的关系与影响 函数声明.变量声明以及变量赋值之间有以下几点共识: 1.所有的全局变量都是window的属性 2.函数声明被提升到范围作用域的顶端 ...

  3. Java 访问限制符 在同一包中或在不同包中：使用类创建对象的权限 & 对象访问成员变量与方法的权限 & 继承的权限 & 深入理解protected权限

    一.实例成员与类成员 1. 当类的字节码被加载到内存, 类中类变量.类方法即被分配了相应内存空间.入口地址(所有对象共享). 2. 当该类创建对象后,类中实例变量被分配内存(不同对象的实例变量互不相同 ...

  4. awk内置函数、外部变量

    外部变量 ①获取外部变量 格式: awk '{action}' 变量名=变量值 ,这样传入变量可以在action中获得值. 示例: test='awk test'--day-5 外部变量 ①获取外部变 ...

  5. PHP自定义函数使用外部变量

    一般,php的自定义函数不能直接使用外部变量. 在php自定义函数中使用外部变量前,需要先使用global对外部变量进行声明.  <?php $var = "hello World!& ...

  6. 关于Lambda表达式访问外部变量

    在<C#高级编程>一书中提到通过Lambda表达式可以访问Lambda表达式块外部的变量 ,这是一个很好的功能(类似Js中的 闭包).但是如果没有正确的使用,会非常危险. 比如下面的事例中 ...

  7. Javascript中函数提升和变量提升

    词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 具体步骤如下: 函数在运行的瞬间,生成一个活动对象(Active ...

  8. unittest之跳过用例（skip） (含如何调用类里面函数相互调取变量的方法)

    当测试用例写完后,有些模块有改动时候,会影响到部分用例的执行,这个时候我们希望暂时跳过这些用例. 或者前面某个功能运行失败了,后面的几个用例是依赖于这个功能的用例,如果第一步就失败了,后面的用例也就没 ...

  9. mybatis:访问静态变量或方法

    访问方法: <if test="@com.csget.constant.ConstantApp@getUser('mobile')== 'kf'"> <![CDA ...

随机推荐

  1. 头文件string.h，cstring与string

    string.h string.h是一个C标准头文件,所有的C标准头文件都形如name.h的形式,通过#include <string.h>可以导入此头文件.之后我们就可以在程序中使用st ...

  2. MySQL分区表最佳实践

    前言: 分区是一种表的设计模式,通俗地讲表分区是将一大表,根据条件分割成若干个小表.但是对于应用程序来讲,分区的表和没有分区的表是一样的.换句话来讲,分区对于应用是透明的,只是数据库对于数据的重新整理 ...

  3. 一文读懂 SuperEdge 云边隧道

    作者 李腾飞,腾讯容器技术研发工程师,腾讯云TKE后台研发,SuperEdge核心开发成员. 杜杨浩,腾讯云高级工程师,热衷于开源.容器和Kubernetes.目前主要从事镜像仓库,Kubernete ...

  4. [Java] 数据分析--分类

    ID3算法 思路:分类算法的输入为训练集,输出为对数据进行分类的函数.ID3算法为分类函数生成分类树 需求:对水果训练集的一个维度(是否甜)进行预测 实现:决策树,熵函数,ID3,weka库 J48类 ...

  5. Linux查看登录日志 last命令 查看当前登录用户

    Linux查看登录日志 linux 发布于 31 分钟前   lastlog 打印系统账号最近一次的登录记录情况,解析的是/var/log/lastlog文件,它是一个data file类型的文件,文 ...

  6. 通过format学习，python的内部方法是面象对象的-python面向对象

    1.常用的形式 s ="{0} {0} qqq {0} xxx {1}".format('dog','cat')print(s) 结果:dog dog qqq dog xxx ca ...

  7. jmeter从安装到使用

    最近,项目需要做接口测试,在python和jmeter之前选择,最终还是选择jmeter,虽然脚本管理及持续集成方面有所不便,但胜在使用简单,调试方便,方便后续做并发压力测试,而且最后的报告统计图表也 ...

  8. shell基础之case应用

    在server0上穿件一个名为/root/script.sh的脚本,让其提供给下列的特性    1.当运行/root/script.sh all,输出为none 2.当运行/root/script.s ...

  9. ubuntu中安装qgit工具-（转自Linux中国）

    QGit是一款由Marco Costalba用Qt和C++写的开源的图形界面 Git 客户端.它是一款可以在图形界面环境下更好地提供浏览版本历史.查看提交记录和文件补丁的客户端.它利用git命令行来执 ...

  10. 为何存在uwsgi还要使用nginx

    nginx是对外的服务接口,外部浏览器通过url访问nginx,nginx接收到浏览器发送过来的http请求,将包解析分析url,如果是静态文件则直接访问用户给nginx配置的静态文件目录,直接返回用 ...