脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 点击弹出总是最后一个

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

 更新时间：2016年01月05日 10:32:43   投稿：mrr  
最近有很多朋友问我，为什么点击弹出的i总是最后一个，于是抽时间写了这篇文章，特此分享到脚本之家平台，供大家参考

在前端群里看见过很多人问过这个问题，今晚又有人问了这个问题，所以写篇文章整理一下。首先看一下代码,点击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的函数

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

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

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();

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


索引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>
您可能感兴趣的文章:

相关文章

  • 让FireFox支持innerText的实现代码

    让FireFox支持innerText的实现代码

    DHTML非标准属性innerText在FireFox中的使用
    2009-12-12
  • JS中获取函数调用链所有参数的方法

    JS中获取函数调用链所有参数的方法

    这篇文章主要介绍了JS中获取函数调用链所有参数的方法,本文直接给出代码示例,需要的朋友可以参考下
    2015-05-05
  • 使用JavaScript为一张图片设置备选路径的方法

    使用JavaScript为一张图片设置备选路径的方法

    在做网页开发的时候，有时候希望给图片设置一个备选路径，即，当src属性对应的主路径加载失败的时候，图片可以马上切换到备选路径，怎么实现呢?下面通过本文给大家分享JavaScript为一张图片设置备选路径的方法，一起看看吧
    2017-01-01
  • 使用JS实现图片展示瀑布流效果(简单实例)

    使用JS实现图片展示瀑布流效果(简单实例)

    下面小编就为大家带来一篇使用JS实现图片展示瀑布流效果(简单实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JS 事件机制完整示例分析

    JS 事件机制完整示例分析

    这篇文章主要介绍了JS 事件机制,结合完整实例形式分析了JavaScript事件响应机制、原理与使用技巧,需要的朋友可以参考下
    2020-01-01
  • js页面跳转的常用方法整理

    js页面跳转的常用方法整理

    跳转页面的方法有很多，在本文整理了一些比较常用，并有示例代码，感兴趣的朋友可以参考下
    2013-10-10
  • 让编辑器支持word复制黏贴、截屏的js代码

    让编辑器支持word复制黏贴、截屏的js代码

    这篇文章主要为大家详细介绍了让编辑器支持word复制黏贴、截屏的js代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 利用Javascript实现简单的转盘抽奖

    利用Javascript实现简单的转盘抽奖

    这篇文章主要介绍了利用Javascript实现的简单的转盘抽奖，文中分享了两种抽奖效果，一种是默认转动，一种是需要点击开始转动的，并给出了晚上的示例代码，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-02-02
  • 纯JS代码实现一键分享功能

    纯JS代码实现一键分享功能

    在qq空间，新浪微博，人人网等网络平台大家经常可以看到一键分享功能，那么基于js代码是如何实现一键分享的呢？下面脚本之家小编给大家介绍js实现一键分享功能的代码，需要的朋友参考下吧
    2016-04-04
  • js最实用string(字符串)类型的使用及截取与拼接详解

    js最实用string(字符串)类型的使用及截取与拼接详解

    这篇文章主要介绍了js string使用截取与拼接，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论