你运行一下代码会发现,无论你点击哪个列表,控制台都是输出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. Weblogic服务端请求伪造漏洞(SSRF)和反射型跨站请求伪造漏洞(CSS)修复教程

    一.服务端请求伪造漏洞 服务端请求伪造(Server-Side Request Forgery),是指Web服务提供从用户指定的URL读取数据并展示功能又未对用户输入的URL进行过滤,导致攻击者可借助 ...

  2. Table展开行

    在element-ui的官网例子中,有展开行的功能,但是只能点击某行的箭头位置,才可以展开当行的内容.这不能满足业务需求,我们老大需要点击该行的任何一个位置都能展开这行内容显示.上网找了好多例子,都能 ...

  3. nginx:负载均衡(三)分流策略

    [1]轮询策略.轮询策略是最简单的策略,无脑配置,不考虑服务器的访问的能力.每个请求按照时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除 upstream www.daysn. ...

  4. Python数据分析中对重复值、缺失值、空格的处理

    对重复值的处理 把数据结构中,行相同的数据只保留一行 函数语法: drop_duplicates() from pandas import read_csv df = read_csv(文件位置) n ...

  5. python笔记6-while、for循环

    1.while--while循环之前,先判断一次,如果满足条件的话,再循环 #while循环 count=(input("请输入循环次数"))#计数器 while count< ...

  6. 输入三个double型的数据,放入到a,b,c三个变量中去,使用条件结构与交换逻辑将这三个变量中的值从小到大排列。

    import java.util.Scanner; public class C8{ public static void main(String []args){ /* 8.输入三个double型的 ...

  7. SharePoint Framework 把你的客户端web部件连接到SharePoint

    博客地址:http://blog.csdn.net/FoxDave 把你的web部件连接到SharePoint来访问SharePoint中的功能和数据,为终端用户提供更完整的体验.本篇会基于之前构 ...

  8. C#正则表达式MatchCollection类

    认识MatchCollection 类 表示通过以迭代方式将正则表达式模式应用于输入字符串所找到的成功匹配的集合. 命名空间:  System.Text.RegularExpressions 属性:C ...

  9. ios手动添加数组字典(NSMutableDictionary)

    @property (nonatomic,strong) NSArray *imageData;//定义一个数组 -(NSArray *)imageDate { if(_imageDate==nil) ...

  10. MongoDB的安装及安装为windows服务

    首先在网上找了一篇教程,于是按着做,下载了最新版的安装包,解压以后目录是这样的: 没有bin目录啊 原因:zip没有经过编译 于是下载安装包,安装包是msi 一直按照next提示就可以了,但是记得选择 ...