看下面代码

<ul id="demo"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

<script> var ul=document.getElementById('demo'); var oLi=ul.getElementsByTagName('li'); for (var i = 0; i < oLi.length; i++) { oLi[i].onclick=function(){ alert(i); } } </script>

那么当我们点击第一个li就会弹出0,点击第二个就会弹出1……真的是这样吗?当我们去实践的时候就会发现,每次弹出的,都是5!!!

为什么会这样呢?

因为当代码执行到这里的时候,i已经变成5了,也就是说,我们还没来得及点击,i已经变成5了,这时候再点击弹出的当然只能是5。你说为什么是5,而不是4,i明明只会增长到4啊!这个我也不知道为什么,如果你知道麻烦告诉我。

那么解决办法是什么呢?

<script> var ul=document.getElementById('demo'); var oLi=ul.getElementsByTagName('li'); for (var i = 0; i < oLi.length; i++) { (function(n){ oLi[n].onclick=function(){ alert(n); } })(i); } </script>

这里我们在for循环内部定义了一个立即执行函数,这样就可以顺利弹出每个li的索引了。

原创文章,转载请注明出处!

JavaScript一个经典问题的更多相关文章

  1. 用原生javascript模拟经典FC游戏公路争霸

    #用原生javascript模拟经典FC游戏公路争霸 前几天看了园子里面的随笔 [原生javascript开发仿微信打飞机小游戏](http://www.cnblogs.com/Mr-Nobody/p ...

  2. 《Javascript网页经典特性300例》

    <Javascript网页经典特性300例> 基础篇 第1章:网页特性 刷新.后退.前进.关闭.标题.跳转禁止网页放入框架动态加载js避免浏览器使用缓存加载页面 第2章:DOM操作 根据n ...

  3. 原来这是一个经典面试题-------Day61

    前几天在table的操作中,记录了动态生成表格的三种方式: 1.html语言的拼接:用字符串或者数组拼接在html语言中,这个理解起来最直观 2.插入行和列:insertRow()和insertCel ...

  4. javascript常用经典算法实例详解

    javascript常用经典算法实例详解 这篇文章主要介绍了javascript常用算法,结合实例形式较为详细的分析总结了JavaScript中常见的各种排序算法以及堆.栈.链表等数据结构的相关实现与 ...

  5. [一个经典的多线程同步问题]解决方案一:关键段CS

    前面提出了一个经典的多线程同步互斥问题,本篇将用关键段CRITICAL_SECTION来尝试解决这个问题. 本文先介绍如何使用关键段,然后再深层次的分析下关键段的实现机制和原理. 关键段CRITICA ...

  6. 《JavaScript网页经典特效300例》

    <JavaScript网页经典特效300例> 基础篇 进阶篇 高级篇

  7. 用Python设计一个经典小游戏

    这是关于Python的第9篇文章,介绍如何用Python设计一个经典小游戏:猜大小. 在这个游戏中,将用到前面我介绍过的所有内容:变量的使用.参数传递.函数设计.条件控制和循环等,做个整体的总结和复习 ...

  8. Linux 进程间通信(包含一个经典的生产者消费者实例代码)

    前言:编写多进程程序时,有时不可避免的需要在多个进程之间传递数据,我们知道,进程的用户的地址空间是独立,父进程中对数据的修改并不会反映到子进程中,但内核是共享的,大多数进程间通信方式都是在内核中建立一 ...

  9. 一个经典的PHP文件上传类

    需求分析如下: (1)支持单个文件上传 (2)支持多个文件上传 (3)可以指定保存位置 可以设置上传文件允许的大小和类型 可以选择重命名和保留原名 <!-- 设计一个经典文件上传类 需求分析 ( ...

随机推荐

  1. WCF的传输安全(读书笔记)

    Wcf的传输安全主要涉及认证.消息的一致性和机密性.Wcf采用两种不同的机制来解决这三个涉及传输安全的问题,即Transport安全模式和Message安全模式. Transport安全模式利用基于传 ...

  2. python 字符串翻转

    通过步进反转[::-1] ]##[::-1]通过步进反转print b

  3. webkit内核分析之 Frame

    参考地址:http://blog.csdn.net/dlmu2001/article/details/6164873 1.    描述 Frame类是WebCore内核同应用之间联系的一个重要的类.它 ...

  4. 读书笔记_Effective_C++_条款四十四:将与参数无关的代码抽离template

    标题上说“将与参数无关的代码抽离template”,这里的参数既可以指类型,也可以是非类型,我们先来看看非类型的情况. 假定我们要为矩阵写一个类,这个矩阵的行列元素个数相等,是一个方阵,因而我们可以对 ...

  5. SNF开发平台WinForm之十一-程序打包-SNF快速开发平台3.3-Spring.Net.Framework

    原来我们用的是微软自带的打包工具去打包,但感觉好像也是第三方做的打包并且很是麻烦,还有时不成功报错.那综合考虑就找一个简单实用的打包工具吧,就找到了NSIS这个.具体打包步骤如下: 1.安装NSIS ...

  6. ruby类名之间<,<=方法

    有时候看源码的时候看到类名之间存在<.<=操作,顿时一头雾水,类名之间也可以比较吗?查了下api,豁然开朗 Class的父类是Module,Module.methods.grep(/< ...

  7. codeforces B. Friends and Presents(二分+容斥)

    题意:从1....v这些数中找到c1个数不能被x整除,c2个数不能被y整除! 并且这c1个数和这c2个数没有相同的!给定c1, c2, x, y, 求最小的v的值! 思路: 二分+容斥,二分找到v的值 ...

  8. python网络编程socket /socketserver

    提起网络编程,不同于web编程,它主要是C/S架构,也就是服务器.客户端结构的.对于初学者而言,最需要理解的不是网络的概念,而是python对于网络编程都提供了些什么模块和功能.不同于计算机发展的初级 ...

  9. PHP如何将进程作为守护进程

    看了这篇:http://blog.codinglabs.org/articles/write-daemon-with-php.html 对里面的posix_setsid()不解 文档解释是" ...

  10. mysql根据身份证信息来获取用户属性信息

    需要:根据身份证信息来获取用户属性 方法:可以使用如下sql语句: ) ' then '北京市' ' then '天津市' ' then '河北省' ' then '山西省' ' then '内蒙古自 ...