JS常见问题之为什么点击弹出的i总是最后一个


Posted in Javascript onJanuary 05, 2016

在前端群里看见过很多人问过这个问题,今晚又有人问了这个问题,所以写篇文章整理一下。首先看一下代码,点击li之后弹出当前li所对应的索引值。于是很多人刷刷刷写出了下面的代码。

var aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++){
  aLi[i].onclick = function(){
    alert(i);
  }
}

  但是结果不尽人意,为了简单,我们约定一下页面中有2个li。点击li之后弹出的都是2。
  我们首先来分析一下为什么结果是1.我们可以简单的将循环分成两部。

i = 0时,aLi[0].onclick = function(){alert(i)}
i = 1时,aLi[1].onclick = function(){alert(i)}
i = 2时,不满足条件跳出循环.

 在执行click的函数的时候,会有一个作用域链,这个作用域链是一个对象列表,这组对象定义了代码作用域中的变量。( 关于变量对象的内容想更详细了解的可以查看变量对象。)当我们alert(i)的时候,会去从内到外的去寻找变量i。这个时候这个函数的作用域链上有两个对象,这时循环已经结束了,i此时的值为2.所以点击任何一个li,弹出的都是2,而不是我们想要的索引值。重点在于弹出的是变量i,变量i,变量i。重要的事情说三遍。

 那么问题来了,我们要如何解决这个问题呢。我们需要做的就是在每次给aLi[i]绑定事件的时候,将这个时候i的值保存在内部的作用域中。解决方案如下。

var aLi = document.getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
 (function(i){
   aLi[i].onclick = function () {
      alert(i);
     };
 })(i)
}

这里涉及到一个块级作用域的概念。在es6出来前,函数是作为创建块级作用域的主要手段。这里我们通过在aLi[i].onclick外面套上一层函数,将i作为参数,我们重新分析一下结果。

i = 0时,
  (function(i){
   aLi[0].onclick = function(){
     alert(i);
   }
  })(0)
  i = 1时,
  (function(i){
   aLi[1].onclick = function(){
     alert(i);
   }
  })(1)
  i = 2时,不满足条件跳出循环.

由于多了一层自执行函数的包裹,当我们点击li时,会有三层的作用域,从内带外分别是:click函数内部的变量对象,自执行函数的变量对象和最外层的window对象。查找到第二层的时候,找到了i,自执行函数的i等于传入的参数值,相对应的存下了当时i的值,所以就弹出了相应的索引值。

下面再给大家分享一个js常见的问题,实现点击li能够弹出当前li索引与innerHTML的函数

JS常见问题之为什么点击弹出的i总是最后一个

点击其中一项需要alert出如下结果:

JS常见问题之为什么点击弹出的i总是最后一个

按照我们平常的想法,代码应该是这样写的:

var myul = document.getElementsByTagName("ul")[0];
  var list = myul.getElementsByTagName("li");
 
  function foo(){
    for(var i = 0, len = list.length; i < len; i++){
      list[i].onclick = function(){
        alert(i + "----" + this.innerHTML);
      }
    }
  }
  foo();

但是不巧的是产生的结果是这样的: 

JS常见问题之为什么点击弹出的i总是最后一个

索引index为什么总是4呢,这是js中没有块级作用域导致的。这里有三种解决思路

1. 使用闭包

<script type="text/javascript">
var myul = document.getElementsByTagName("ul")[0];
var list = myul.getElementsByTagName("li");
function foo(){
  for(var i = 0, len = list.length; i < len; i++){
    var that = list[i];
    list[i].onclick = (function(k){
      var info = that.innerHTML;
      return function(){
        alert(k + "----" + info);
      };
    })(i);
  }
}
foo();
</script>

2.使用ES6中的新特性let来声明变量

用let来声明的变量将具有块级作用域,很明显可以达到要求,不过需要注意的是得加个'use strict'(使用严格模式)才会生效

<script type="text/javascript">
var myul = document.getElementsByTagName("ul")[0];
var list = myul.getElementsByTagName("li");
function foo(){'use strict'
  for(let i = 0, len = list.length; i < len; i++){
    list[i].onclick = function(){
      alert(i + "----" + this.innerHTML);
    }
  }
}
foo();
</script>

3.引入jquery,使用其中的on或delegate进行事件绑定(它们都有事件代理的特性)

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">
$("ul").delegate("li", "click", function(){
  var index = $(this).index();
  var info = $(this).html();
  alert(index + "----" + info);
});
</script>
<script type="text/javascript">
$("ul").on("click", "li", function(){
  var index = $(this).index();
  var info = $(this).html();
  alert(index + "----" + info);
});
</script>
Javascript 相关文章推荐
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
详解Javascript继承的实现
Mar 25 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 #Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 #Javascript
jQuery实现二级下拉菜单效果
Jan 05 #Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 #Javascript
jquery中ajax处理跨域的三大方式
Jan 05 #Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 #Javascript
多个js毫秒倒计时同时进行效果
Jan 05 #Javascript
You might like
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
php日历制作代码分享
2014/01/20 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
用javascript实现自定义标签
2007/05/08 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
浅析Python 中整型对象存储的位置
2016/05/16 Python
Python之文字转图片方法
2018/05/10 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
解决python运行启动报错问题
2020/06/01 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
毕业自我鉴定总结
2014/03/24 职场文书
志愿者活动总结范文
2014/04/26 职场文书
学雷锋的心得体会
2014/09/04 职场文书
停电调休通知
2015/04/16 职场文书
Win2008系统搭建DHCP服务器
2022/06/25 Servers
基于Python编写一个监控CPU的应用系统
2022/06/25 Python