用纯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/ ...
随机推荐
- Python isspace() 方法检测字符串是否只由空格组成。
- JDK自带的keytool证书工具详解
一.生成证书 keytool -genkey -alias tomcat -keyalg RSA -keystore D:/tomcat.keystore -keypass 123456 -store ...
- xshellDoc_1base
1◆ 到根目录 cd / 2◆ 创建文件夹 mkdir test 3◆ 到目录 cd /root/test/~~ 4◆修改文件名 mv test testbak 5◆ 查看 ls ...
- Vue + Element UI 实现权限管理系统 (管理应用状态)
使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题.收缩 ...
- 初时Windows程序
window 操作系统中,处处是窗体 优点:简单 强大 方便 灵活 步骤: 新建项目 项目类型 visual C#项目 模板 window应用程序 用partial 将同一个窗体的代码分开放在两个文件 ...
- 基于WMI的信息查询和编辑,按微软的说明一般都是
晕!这个不是很简单的东西吗? //---------WMI---------- type Rec_Wmi = record ComputerName: string; Namespace: strin ...
- 解决了好几个软件的构建问题,在解决部署问题,bluemix部署
https://www.puteulanus.com/archives/838#comment-961新版 Bluemix 一键搭建 SS 脚本 https://blog.feixueacg.com/ ...
- vue-router-9-HTML5 History 模式
vue-router 默认 hash 模式,页面不会重新加载 用路由的 history 模式,利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const r ...
- S2 深入.NET和C#编程 笔试测试错题积累
---恢复内容开始--- <深入.NET平台和C#编程>内部测试题-笔试试卷错题积累 1: 1) 以下关于序列化和反序列化的描述错误的是( C). a) 序列化是将对象的状态存储到特定存储 ...
- 7 Serial Configuration 理解(二)
*Serial Configuration Mode 串行配置模式分为:Master Serial 和 Slave Serial (如下图)两类: 两者的区别在与CCLK的输入输出方向:主动模式下为输 ...