比如页面上有一个ul,数个li,现在给li添加点击事件。

    var li = document.getElementsByTagName("li");
    for(var i = 0; i < li.length; i++) {
li[i].addEventListener("click",function () {
console.log(i);
})
  }

但是,这样写之后我们发现,点击任何一个li,打印的值都为5,这是因为闭包中共用i值,而i的值由于执行for循环,都变为了5

为了正常显示i值,我们可以使用如下方法:

 for (var i = 0; i < lis.length; i++) {
(function(arg){
li[arg].onclick = function(){
console.log(arg);
};
})(i)
}

  

类似于这样

			var li = document.getElementsByTagName("li");
for(var i = 0; i < li.length; i++) {
getConsole(i);
} function getConsole(i){
li[i].addEventListener("click", function() {
console.log(i);
}); }

  

使用for循环添加点击事件时,获取i值的方法的更多相关文章

  1. 继承UIView的子控件添加点击事件

    UITapGestureRecognizer*tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:selfaction:@select ...

  2. ECharts柱状图添加点击事件

    参考: https://zhuanlan.zhihu.com/p/33050579 https://blog.csdn.net/sophia_xiaoma/article/details/780559 ...

  3. 【Unity】用代码给按钮动态添加点击事件

    问题:多数情况下用UGUI的Button控件身上的OnClick()列表可以指明该按钮点击后触发的回调.现在想要调用自定义脚本里的方法,当这个脚本挂在Button所属的Canvas身上时,传入Canv ...

  4. a标签添加点击事件

      a标签添加点击事件 CreateTime--2017年8月8日09:11:34 Author:Marydon 一.基础用法 方式一:(不推荐使用) <a href="javascr ...

  5. 给View 添加手势,点击无反应 如何给View添加点击事件,手势方法

    项目中有很多地方需要添加点击事件,重复代码很多,所以做了一个UIView的分类,专门做点击事件使用.项目地址:UIView-Tap 代码很简单,主要有一点就是注意分类不能直接添加属性,需要用到运行时相 ...

  6. [Swift通天遁地]一、超级工具-(1)动态标签:给UILabel文字中的Flag和url添加点击事件

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  7. openlayers上添加点击事件

    有很多场景会有这个需求,就是我绘制了图标,点击图标需要展示一些对应的信息 openlayer的事件主要是通过监听来完成的,你所有的icon的点击事件都是可以通过监听map的点击事件来处理对应的逻辑的 ...

  8. 移动端,ajax 动态加载的元素,为动态添加的一系列同个类名的元素添加点击事件

    背景:一个列表页,有一系列同类名的元素,需要为每一个动态添加的列表项添加事件: 点击选择下图中不同的文档类型,再通过 ajax 动态加载不同的文档. 使用过的方法: 1.通知 jquery 的 $(s ...

  9. 【MAUI】为 Label、Image 等控件添加点击事件

    一.前言 已经习惯了 WPF.WinForm 中"万物皆可点击"的方式. 但是在 MAUI 中却不行了. 在 MAUI 中,点击.双击的效果,是需要通过"手势识别器&qu ...

随机推荐

  1. json & pickle & shelve 模块

    JSON表示的对象就是标准的JavaScript语言的对象,JSON和Python内置的数据类型对应如下: # json序列化 import json,time user={'name':'egon' ...

  2. OVF and OVA

    最近测试的东西有关于ovf 和ova等相关用例,在网上找了点内容摘抄了下来. 一.什么是OVF文件 开源虚拟化格式OVF文件是一种开源的文件规范,它描述了一个开源.安全.有效.可拓展的便携式虚拟打包以 ...

  3. 【转】Git介绍

    版本控制 说到版本控制,脑海里总会浮现大学毕业是写毕业论文的场景,你电脑上的毕业论文一定出现过这番景象! 毕业论文_初稿.doc 毕业论文_修改1.doc 毕业论文_修改2.doc 毕业论文_修改3. ...

  4. MySQL数据库(5)_MySQL数据库视图、触发器

    一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( S ...

  5. linux systemctl 指令 —— 阮一峰

    Systemd 指令 原文链接如果有效,请点击原文链接查看.原文:http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-commands.ht ...

  6. MyBatis 插入数据库返回主键

    最近在搞一个电商系统中由于业务需求,需要在插入一条产品信息后返回产品Id,刚开始遇到一些坑,这里做下笔记,以防今后忘记. 类似下面这段代码一样获取插入后的主键 User user = new User ...

  7. pdo封装2

    <?php //添加了一个 _createSql 方法,负责创建所有sql class Db{ static private $ins; private $pdo; private $table ...

  8. yii异常处理架构

    使用方法: use \yii\base\ErrorException; try { exec("curl http://xxx",$out,$retno); if(0 !== $r ...

  9. CSS 命名里面有大学问

    其实迟迟不敢开始写关于样式里布局方面的心得, 因为大多数人眼中,哪需要管那么多,只需要最终效果达到了就行了呗. 然而,即使是如今国内外顶级大牛也不敢说自己是个优秀的 CSS 工程师. 一般大公司都是 ...

  10. 以太坊钱包Geth使用命令

    一.启动以太坊钱包Geth 打开一个控制台,执行同步区块命令 #同步测试链geth --fast --cache=512 --rpc --rpcapi personal,db,eth,net,web3 ...