用纯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/ ...
随机推荐
- pickle file in matlab
Load pickle files in Matlab Posted on June 12, 2013 by xcorr http://xcorr.net/2013/06/12/load-pick ...
- tidb使用坑记录
转载自:https://www.cnblogs.com/linn/p/8459327.html tidb使用坑记录 1.对硬盘要求很高,没上SSD硬盘的不建议使用 2.不支持分区,删除数据是个大坑. ...
- day33 线程的创建 验证线程之间共享数据 守护线程 线程进程效率对比 锁 死锁 递归锁
今日内容: 1.线程理论 2.锁: 牺牲了效率,保证了数据的安全(重点) 3.守护线程 4.GIL锁:(重点) 5.计算密集型和IO密集型 6.信号量,事件(了解) 7.补充. 子进程中不能input ...
- Linux系统命令行中vim编辑器取消高亮显示
由于在使用vim编辑代码的时候不小心忘记首先输入i(insert)模式,导致写的代码出现了棕黄色的阴影显示 摸索了很久终于找到了解决方法: 1.退出vim编译器 2.在在命令行下输入:nohl,回车 ...
- 组队项目——黄金点(叶雨&王浩)
代码来源:自己编写 运行环境:win10 编译软件:VC++6.0 使用语言:C语言 功能:可多次运行,由用户决定退出与否,可以记录玩家的姓名与分数并显示. BUG:暂未发现 GitHub地址:htt ...
- 自定义input[type="radio"]的样式(支持普通浏览器,IE8以上)
对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 对单选按钮自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :c ...
- SQL--数据表--基本操作
表操作 表与字段是密不可分的. 新增数据表 Create table [if not exists] 表名(字段名字 数据类型,字段名字 数据类型 --最后一行不需要逗号) [表选项] ; if no ...
- Nginx日志和http模块相关变量
$arg_PARAMETER #HTTP 请求中某个参数的值,如/index.php?site=www.ttlsa.com,可以用$arg_site 取得 www.ttlsa.com 这个值. $ar ...
- IE6以下版本对元素width和height的处理与CSS标准的兼容性问题
1.CSS使用width和height定义元素框的内容,Windows平台的IE6以下版本浏览器并未按照标准处理而是使用width和height来定义可见元素框的尺寸,IE/win使用width来描述 ...
- awk入门及进阶
awk是Linux下优良的文本处理工具,有自成一体的编程语法规则,在循环和条件判断语句等方面和C语言很像. 其一般形式是:Pattern1 {ACTIONS; } Pattern2 { ACTIONS ...