JavaScript中子函数访问外部变量的3种解决方法

发布时间：2021-08-17 12:16 来源：阅读：0 作者：张明玉栏目： JavaScript 欢迎投稿：712375056

前言

我们在写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);
 /

免责声明：本站发布的内容（图片、视频和文字）以原创、来自本网站内容采集于网络互联网转载等其它媒体和分享为主，内容观点不代表本网站立场，如侵犯了原作者的版权，请告知一经查实，将立刻删除涉嫌侵权内容，联系我们QQ:712375056，同时欢迎投稿传递力量。

上一篇新闻：
上一篇：浅谈node使用jwt生成的token应该存在哪里
下一篇新闻：
下一篇：深入理解typescript中的infer关键字的使用

云主机8折虚拟主机6折

红包可用于（云服务器、高防服务器、裸金属服务器、高防IP、云数据库、CDN加速）购买和续费

JavaScript中子函数访问外部变量的3种解决方法

前言

解决办法1：立即执行

特网科技产品

解决方案

帮助与支持

其他链接

联系我们

JavaScript中子函数访问外部变量的3种解决方法

前言

解决办法1：立即执行

最新资讯

相关推荐

相关标签

特网科技产品

解决方案

帮助与支持

其他链接

联系我们