我们在写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. Salsa20算法介绍

    简介 Salsa20是一种流式对称加密算法,类似于Chacha20,算法性能相比AES能够快3倍以上. Salsa20算法通过将32 Byte的key和8 Byte的随机数nonce扩展为2^70 B ...

  2. .Net Core·热加载的实现及测试

    阅文时长 | 0.25分钟 字数统计 | 460字符 主要内容 | 1.引言&背景 2.解决原理&方法 3.声明与参考资料 『.Net Core·热加载的实现及测试』 编写人 | SC ...

  3. [bug] Python AttributeError: module 'web' has no attribute 'application'

    原因 文件名是web.py,与包名web冲突 解决 重命名文件,再运行

  4. [Scala] 面向对象

    类定义 当属性是private时,scala会自动为其生成get和set方法 只希望scala生成get,不生成set,可定义为常量 不生成get和set方法,使用private[this]关键字 1 ...

  5. [DB] HDFS

    体系架构 NameNode HDFS主节点.管理员 接收客户端(命令行.Java程序)的请求:创建目录.上传.下载.删除数据 管理和维护HDFS的日志和元信息 日志文件(edits文件) 二进制文件, ...

  6. python类变量的分类和调用方式

    #!/usr/bin/python # -*- coding: UTF-8 -*- # 父类 class JustCounter: ''' 类变量:类变量在整个实例化的对象中是公用的.类变量定义在类中 ...

  7. keepalived的脑裂问题与解决

    Keepalived的作用是检测服务器的状态,如果有一台web服务器宕机,或工作出现故障,Keepalived将检测到,并将有故障的服务器从系统中剔除,同时使用其他服务器代替该服务器的工作,当服务器工 ...

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

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

  9. python基础之列表、元组

    一.列表 列表(list)是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 作用:多个装备,多个爱好,多门课程,多个女朋友等 定义:[ ]内可以有多个任意类型的值,逗号 ...

  10. mysql基础之mariadb概念

    一.数据库介绍 什么是数据库(Database)? 简单的说,数据库就是一个存放数据的仓库,这个仓库是按照一定的数据结构(数据结构是指数据的组织形式或数据之间的联系)来组织,存储的,我们可以通过数据库 ...