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

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

用纯JS实现,点击一个列表时,输出对应的索引(不能用JQuery哦)的更多相关文章
- 用原生js实现,点击一个列表时,输出对应的索引
var ul = document.querySelector("ul"); ul.addEventListener("mousedown", mouseHan ...
- jquery 实现重复点击一个元素时不重复执行效果
jquery 实现重复点击一个元素时不重复执行效果 这需要用到jquery的stop方法 实例 停止当前正在运行的动画: $("#stop").click(function(){ ...
- 【分享】纯js的n级联动列表框 —— 基于jQuery,支持下拉列表框和列表框,最重要的是n级,当然还有更重要的
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...
- 纯js的N级联动列表框 —— 基于jQuery
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...
- 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
- IOS中div contenteditable=true无法输入 fastclick.js在点击一个可输入的div时,ios无法正常唤起输入法键盘
原文地址: https://blog.csdn.net/u010377383/article/details/79838562 前言 为了提升移动端click的响应速度,使用了fastclick.js ...
- 原生JS实现点击一个按钮显示一个div,再点击按钮div隐藏,或点击除div外其它空白处div隐藏
<!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...
- js实现点击一个按钮进行两种状态的切换(toggle)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- js操作dom---创建一个域来输出调试信息
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- listener.ora和tnsnames.ora格式解析
listener.ora是oracle数据库服务端的监听配置文件,包括协议.IP地址和端口等内容:tnsnames.ora是oracle数据库客户端的连接配置文件,也是对应的协议.IP地址和端口等内容 ...
- [转]java nio解决半包 粘包问题
java nio解决半包 粘包问题 NIO socket是非阻塞的通讯模式,与IO阻塞式的通讯不同点在于NIO的数据要通过channel放到一个缓存池ByteBuffer中,然后再从这个缓存池中读出数 ...
- EventBus简单封装
前言 以前每个页面与每个页面业务逻辑传递让你不知所措,一个又一个接口回调,让你晕头转向,一个又一个参数让你混乱不堪.EventBus一个耦合度低的让你害怕的框架. 什么是EventBus EventB ...
- ElasticSearch安装部署(Windows)
测试版本:elasticsearch-5.1.1 1.解压elasticsearch-5.1.1.zip. 2.执行elasticsearch.bat启动服务,启动画面如下: 3.访问ElasticS ...
- 如何将两个字段合成一个字段显示(oracle和sqlserver的区别)
oracle中,如何将两个字段数据合并成一个字段显示,接下来看一下在sql server和pl/sql的区别 sql server中如何合并(用Cast()函数) --1.创建模拟的数据表--- cr ...
- NiXi.DAY06东软实训.:面向对象思想~抽象~static~final~构造方法及其重载
本章技能目标: 使用类图描述设计 掌握面向对象设计的基本步骤 掌握类和对象的概念 掌握构造方法及其重载 掌握封装的概念及其使用 本章单词: class:类 object:对象 static: fina ...
- 如何破解Visual studio 2013
1.打开VS2013点击菜单栏中的帮助,选择注册产品. 2.如下图所示,你就可以看到你的VS是不是试用版了,很显然,现在我的还是试用版,还有20天的使用期限. 3.如下图所示,点击更改我的产品许可证. ...
- 【转】c++ make_pair函数使用
[好记性不如烂笔头:在<C++ Templates>看到这个函数,发现正是前段时间写项目程序所要用到的,可惜当时还不知道有这个用法,当时是自己写了个结构体..]Utilities < ...
- (C/C++学习笔记) 三. 作用域和可见性
三. 作用域和可见性 ● 标识符的作用域 标识符的作用域是标识符在程序源代码中的有效范围,从小到大分为函数原型作用域.块作用域(局部作用域),文件作用域(全局作用域). 1. 函数原型作用域 函数原型 ...
- 异步设备IO OVERLAPPED结构(设备内核对象 事件内核对象 可提醒IO)
同步IO是指:线程在发起IO请求后会被挂起,IO完成后继续执行. 异步IO是指:线程发起IO请求后并不会挂起而是继续执行.IO完毕后会得到设备驱动程序的通知. 一.异步准备与OVERLAPPED结构 ...