你运行一下代码会发现,无论你点击哪个列表,控制台都是输出10。这是因为var声明的变量是函数作用域的,而不是块级作用域的。也就是说,for循环10次,每次都是改变同一个i,所以它的值会从0一直加到10。还有个问题是闭包导致的,闭包保存的是外部变量的引用,而不是值。也就是说,循环10次监听器创建了10 个闭包,它们里面的i引用的是同一个啊。所以全部都指向了10.

要解决这个问题有两种方法。一种是使用ES6的let来替代 var i = 0 里面的var, 因为let支持块级作用域。改成如下就正常了。

用纯JS实现,点击一个列表时,输出对应的索引(不能用JQuery哦)的更多相关文章

  1. 用原生js实现,点击一个列表时,输出对应的索引

    var ul = document.querySelector("ul"); ul.addEventListener("mousedown", mouseHan ...

  2. jquery 实现重复点击一个元素时不重复执行效果

    jquery 实现重复点击一个元素时不重复执行效果 这需要用到jquery的stop方法 实例 停止当前正在运行的动画: $("#stop").click(function(){ ...

  3. 【分享】纯js的n级联动列表框 —— 基于jQuery,支持下拉列表框和列表框,最重要的是n级,当然还有更重要的

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...

  4. 纯js的N级联动列表框 —— 基于jQuery

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...

  5. 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  6. IOS中div contenteditable=true无法输入 fastclick.js在点击一个可输入的div时,ios无法正常唤起输入法键盘

    原文地址: https://blog.csdn.net/u010377383/article/details/79838562 前言 为了提升移动端click的响应速度,使用了fastclick.js ...

  7. 原生JS实现点击一个按钮显示一个div,再点击按钮div隐藏,或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  8. js实现点击一个按钮进行两种状态的切换(toggle)

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  9. js操作dom---创建一个域来输出调试信息

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 微信小程序 HMACSHA256 哈希加密

    下载CryptoJS, 增加红色的这句 module.exports = CryptoJS /* CryptoJS code.google.com/p/crypto-js (c) 2009-2012 ...

  2. 【转】Java中static关键字用法总结

    1.     静态方法 通常,在一个类中定义一个方法为static,那就是说,无需本类的对象即可调用此方法 声明为static的方法有以下几条限制: · 它们仅能调用其他的static 方法. · 它 ...

  3. 二:通过VirtualBox+Vagrant创建一个centos的虚拟机:

    官网安装VirtualBox及Vagrant. 下载centos7,添加到vagrant中. http://e-proxy.yfb.sunline.cn/download/vagrant/centos ...

  4. 线程queue与进程queue

    进程queue: from multiprocessing import Queue,Process def func(qq): qq.put('function:我要放数据,给你来取...') if ...

  5. Android system :led_class驱动

    一.代码: leds_4412.c #include <linux/kernel.h> #include <linux/module.h> #include <linux ...

  6. 5.4 C++重载输入与输出操作符

    参考:http://www.weixueyuan.net/view/6382.html 总结: 在C++中,系统已经对左移操作符“<<”和右移操作符“>>”分别进行了重载,使其 ...

  7. capjoint一些生成文件的解释

    王亮 // :: https://github.com/wangliang1989/oh-my-cap/blob/dev/docs/result.md 这是cap_plt.pl的输入文件.out的各项 ...

  8. centos7 rocketmq 4.2.0

    参考: http://rocketmq.apache.org/docs/quick-start/ 1.环境64bit OS, Linux/Unix/Mac is recommended;64bit J ...

  9. python random模块(获取随机数)

    如果要使用random模块,需要先导入 import random 1.random.random()  #用于生成一个0到1的随机浮点数 2.random.uniform(a,b)  #用于生成一个 ...

  10. Vuex的学习笔记一

    以下的解释,是在知乎看到的,感觉粗俗易懂. 组件之间的作用域独立,而组件之间经常又需要传递数据. A 为父组件,下面有子组件 B 和 C. A 的数据可以通过 props 传递给 B 和 C.A 可以 ...