我们在写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. ES6学习-4 解构赋值（1）数组的解构赋值

    解构赋值是ES6很大的一个提升,为我们带来了很多方便,但用不好,会使程序的可读性变差,所以用时要注意,尽量保持程序的易读性. 数组解构赋值 在JS没有支持解构赋值之前,我们声明几个变量并赋值通常都是像 ...

  2. 3. java基础语法

    3.1 注释(理解) 注释是对代码的解释和说明文字,可以提高程序的可读性,因此在程序中添加必要的注释文字十分重要.Java中的 注释分为三种: 单行注释.单行注释的格式是使用//,从//开始至本行结尾 ...

  3. 像素 PIXEL 图片的基本单位 像素非常小 图片是成千上万的像素组成 显示/屏幕分辨率 （DPI 屏幕分辨率）

    像素 PIXEL 图片的基本单位 像素非常小 图片是成千上万的像素组成 显示/屏幕分辨率 (DPI 屏幕分辨率) 图像分辨率 (PPI) 1920*1080是像素点长度1920个像素点 X1080个像 ...

  4. bond0 配置ip不生效排查方法

         今天巡检的时候,发现无法连接到服务器上面了,于是到机房连接到显示器查看: 1.先检查网卡,协议有没有问题. 2.远程链接的网卡名称是bond0,用ifconfig看看网卡配置,然后发现配置的 ...

  5. Centos6.8安装mysql 步骤

    第1步.查看CentOS下是否已安装mysql 输入命令 :yum list installed | grep mysql 第2步.删除已安装mysql 输入命令:yum -y remove mysq ...

  6. Scala 中 object、class 与 trait 的区别

    Scala 中 object.class 与 trait 的区别 引言 当你刚入门 Scala,肯定会迫不及待想要编写自己的第一个 Scala 程序.如果你已经在交互模式下敲过 Scala 代码,想必 ...

  7. docker命令补全

    安装docker自带包: source /usr/share/bash-completion/completions/docker 缺少下面的包,TAB会报错 yum install -y bash- ...

  8. Centos7.4 docker安装包下载以及离线安装

    docker安装包下载地址:https://download.docker.com/linux/centos/7/x86_64/stable/Packages/ 需要下载一个selinux包:dock ...

  9. html原生js实现99乘法表

    原生的js实现99乘法表实现选择下拉框颜色,改变背景颜色为选中的颜色 <!DOCTYPE html> <html> <head> <meta charset= ...

  10. 西门子 S7200 以太网模块连接组态王方法

    北京华科远创科技有限研发的远创智控ETH-YC模块,以太网通讯模块型号有MPI-ETH-YC01和PPI-ETH-YC01,适用于西门子S7-200/S7-300/S7-400.SMART S7-20 ...