用纯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/ ...
随机推荐
- possible error
1● regedit 2● path [HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\Windows Error Reporting] 3● 步 ...
- BeanUtils.copyProperties(A,B)使用注意事项
***最近项目中用到BeanUtils.copyProperties(),然后踩了一些坑,也在网上查看了很多同行的测试和总结,现在将自己的测试.整理的注意事项分享如下,希望大家一起学习进步. ***注 ...
- BPTT for multiple layers
单层rnn的bptt: 每一个时间点的误差进行反向传播,然后将delta求和,更新本层weight. 多层时: 1.时间1:T 分层计算activation. 2.时间T:1 利用本时间点的误差,分层 ...
- laravel5.2 开发中打印sql语句
在 AppServiceProvider 的boot方法中写入 use DB;use Event; if ( env('APP_ENV') == 'dev' ) { DB::connection()- ...
- angular 我看过的技术书籍
13年我在悠唐网络做前端开发时,当时仿豌豆荚一个sdk 发布应用界面的时候,看到代码用到奇怪的ng-,当时查了下是用angular,从那时开始慢慢接触angular,之后进入逸橙官网组使用angula ...
- IDE 版本
BDS 5 2007 D11 VER180 and VER185 RAD Studio 8 XE D15 VER 220 RAD 18 XE 10.1 Berlin D24 VER310 St ...
- 锤子科技 Smartisan M1L 咖啡金 真皮背面 高配版 5.7
http://www.smartisan.com/m1/#/os 快人一步的OS http://www.smartisan.com/shop/#/buyphone?c=coffee&v= ...
- day01 初识Python
今日主要内容 1.初识python 2.简单了解下python的数据类型 nubmer=int(input("请输入数字大小:")) if nubmer>66: print( ...
- linux系统安装tomcat详细配置
1.通过ssh工具将apache-tomcat-7.0.85.tar.gz拖拽到 /home文件下 2.切换到/home 目录下 3.解压 指令 tar -zvxf apache-tomcat-7.0 ...
- 牛客第三场多校 H Diff-prime Pairs
链接:https://www.nowcoder.com/acm/contest/141/H来源:牛客网 Eddy has solved lots of problem involving calcul ...