我们在写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. 用 edgeadm 一键安装边缘 K8s 集群和原生 K8s 集群

    背景 目前,很多边缘计算容器开源项目在使用上均存在一个默认的前提:用户需要提前准备一个标准的或者特定工具搭建的 Kubernetes 集群,然后再通过特定工具或者其他方式在集群中部署相应组件来体验边缘 ...

  2. training11.14

    7-10 关于堆的判断 (25分)   题目:将一系列给定数字顺序插入一个初始为空的小顶堆H[].随后判断一系列相关命题是否为真.命题分下列几种: x is the root:x是根结点: x and ...

  3. python介绍，计算机核心基础，与运行程序有关的三大核心硬件，操作系统

    python介绍,计算机核心基础,与运行程序有关的三大核心硬件,操作系统 引子 python是什么? 什么是编程语言?为何要有编程语言? 什么是编程?什么是程序?什么是进程?为何要编程? 计算机基础 ...

  4. select执行顺序

    先from 找到表on过滤 找到两张表有对应关系的记录按join的方式添加外部行where 过滤group by分组having 过滤select 从having 过滤出来的字段中选择需要的字段dis ...

  5. bug修复

    bug严重级别 bug个数 bug修复率 上个版本的bug修复率 和arm对比 arm已修复

  6. python的数组

  7. Pandas之:Pandas高级教程以铁达尼号真实数据为例

    Pandas之:Pandas高级教程以铁达尼号真实数据为例 目录 简介 读写文件 DF的选择 选择列数据 选择行数据 同时选择行和列 使用plots作图 使用现有的列创建新的列 进行统计 DF重组 简 ...

  8. 在gitlab网页上合并分支

    在gitlab网页上合并分支 使用gitlab网页将代码合并分 下面将dev分支代码合并至master 1.点击request merge 2.源分支为当前分支,目标分支默认为master,确认无误, ...

  9. node.js学习(7)流和管道

    1 导入模块 输入流 # 读取流 # 写入流 # # 管道 # 压缩 # 解压缩

  10. THINKPHP_(8)_修改TP源码，支持基于多层关联的任一字段进行排序

    之前博文 前述博文THINKPHP_(1)_修改TP源码,支持对中文字符串按拼音进行排序,其解决的主要问题是,对于查询出的think\collection数据,按指定字段对数据进行排序,从而在页面上进 ...