比如页面上有一个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. selenium 用autoIT上传下载文件

    一.下载安装AutoIT 下载并安装AutoIT,下载链接:https://www.autoitscript.com/site/autoit/ AutoIT安装成功后,可以在开始菜单下看到AutoIT ...

  2. Python基础(17)_面向对象程序设计(抽象类、继承原理、封装、多态,绑定方法)

    一.抽象类 抽象类是一个特殊的类,它的特殊之处在于只能被继承,不能被实例化 1.在python中实现抽象类 import abc #利用abc模块实现抽象类 class All_file(metacl ...

  3. iframe 跨域请求

    iframe.contentWindow 兼容各个浏览器,可取得子窗口的 window 对象. iframe.contentDocument Firefox 支持,> ie8 的ie支持.可取得 ...

  4. 模块调用,datetime,time,logging,递归,双层装饰器, json,pickle迭代器和生成器

    一.python模块(导入,内置,自定义,开源) 1.模块简介 模块是一个包含所有你定义的函数和变量的文件,其后缀名是.py.模块可以被别的程序引入,以使用该模块中的函数等功能.这也是使用python ...

  5. 我的npm笔记

    本文记录一些npm的使用技巧,主要包括自己常用的命令,做个备忘. NPM 是什么? NPM是NodeJS的包管理工具,现在已经进一步发展,致力于为很多其他平台提供包管理工具,其核心思想就是让包的安装更 ...

  6. iOS 结构简单清晰的 设置页面

    这个是也是看了人家的代码,觉得甚是简单清晰,也是比较容易扩展.拿来学习一下 效果展示: 重点有以下2处: 1 .建立groupModel 列清组元素:当前组list 集合, 是否有header 或者 ...

  7. 每天一个Linux命令(44)crontab命令

        crontab命令被用来提交和管理用户需要周期性执行的任务,与windows下的计划任务类似.     (1)用法:     用法: crontab  [-u user]  file cron ...

  8. XML文件结构和基本语法

    XML文件的结构性内容,包括节点关系以及属性内容等等.元素是组成XML的最基本的单位,它由开始标记,属性和结束标记组成.就是一个元素的例子,每个元素必须有一个元素名,元素可以若干个属性以及属性值. x ...

  9. 1000M链路的理论值计算

    1000M约等于(1秒/(1纳秒))/ (1024*1024) ============================================================== 1.什么是 ...

  10. windows7下手工搭建Apache2.2 php5.3 Mysql5.5开发环境

    Apache2.2(apache_2.2.2-win32-x86-no_ssl)php5.3.5(php-5.3.5-Win32-VC6-x86,请注意选择VC6版本,否则无法加载php5apache ...