ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript中子函数访问外部变量的方法

2021-06-26 22:31:07  阅读:280  来源: 互联网

标签:function 变量 JavaScript wrapper 中子 按钮 var btn click


我们在写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环境,利用事件参数来转递变量是最简单的,而且可以传递结构化的数据。

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

标签:function,变量,JavaScript,wrapper,中子,按钮,var,btn,click
来源: https://www.cnblogs.com/netWild/p/14939379.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有