使用for循环添加点击事件时,获取i值的方法
比如页面上有一个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值的方法的更多相关文章
- 继承UIView的子控件添加点击事件
UITapGestureRecognizer*tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:selfaction:@select ...
- ECharts柱状图添加点击事件
参考: https://zhuanlan.zhihu.com/p/33050579 https://blog.csdn.net/sophia_xiaoma/article/details/780559 ...
- 【Unity】用代码给按钮动态添加点击事件
问题:多数情况下用UGUI的Button控件身上的OnClick()列表可以指明该按钮点击后触发的回调.现在想要调用自定义脚本里的方法,当这个脚本挂在Button所属的Canvas身上时,传入Canv ...
- a标签添加点击事件
a标签添加点击事件 CreateTime--2017年8月8日09:11:34 Author:Marydon 一.基础用法 方式一:(不推荐使用) <a href="javascr ...
- 给View 添加手势,点击无反应 如何给View添加点击事件,手势方法
项目中有很多地方需要添加点击事件,重复代码很多,所以做了一个UIView的分类,专门做点击事件使用.项目地址:UIView-Tap 代码很简单,主要有一点就是注意分类不能直接添加属性,需要用到运行时相 ...
- [Swift通天遁地]一、超级工具-(1)动态标签:给UILabel文字中的Flag和url添加点击事件
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- openlayers上添加点击事件
有很多场景会有这个需求,就是我绘制了图标,点击图标需要展示一些对应的信息 openlayer的事件主要是通过监听来完成的,你所有的icon的点击事件都是可以通过监听map的点击事件来处理对应的逻辑的 ...
- 移动端,ajax 动态加载的元素,为动态添加的一系列同个类名的元素添加点击事件
背景:一个列表页,有一系列同类名的元素,需要为每一个动态添加的列表项添加事件: 点击选择下图中不同的文档类型,再通过 ajax 动态加载不同的文档. 使用过的方法: 1.通知 jquery 的 $(s ...
- 【MAUI】为 Label、Image 等控件添加点击事件
一.前言 已经习惯了 WPF.WinForm 中"万物皆可点击"的方式. 但是在 MAUI 中却不行了. 在 MAUI 中,点击.双击的效果,是需要通过"手势识别器&qu ...
随机推荐
- linux crontab+curl+php 实现php定时任务
首先登入Linux ->用root登入 在命令行输入 crontab -e 之后就会打开一个文件,并且是非编辑状态,则是vi的编辑界面,通过敲键盘上的i,进入编辑模式,就可以编辑内容.这个文件 ...
- 玩转pandas
一.pandas概述 pandas :pannel data analysis(面板数据分析).pandas是基于numpy构建的,为时间序列分析提供了很好的支持.pandas中有两个主要的数据结构, ...
- 剑指offer 面试53题
面试53题: 题目:统计一个数字在排序数组中出现的次数. 思路:二分查找法,分别找到此数字在排序数组中第一次和最后一次出现的位置,然后次数等于两个位置之差加1. 时间复杂度:O(log n) 解题代码 ...
- IE浏览器连不上网,其他浏览器可以
周末因工作需要,需用IE浏览器.结果发现IE连不上网,而其他浏览器正常上网. 首先排查不是网络连接问题. 又重启了一下网络连接.禁用---->启用. 还是不好使.(最后找到原因是DNS设置问题. ...
- Python进阶(2)_进程与线程的概念
1 进程与线程相关概念 1.1 进程 进程定义: 进程就是一个程序在一个数据集上的一次动态执行过程.进程一般由程序.数据集.进程控制块三部分组成,是最小的资源管理单元 程序:用来描述进程要完成哪些功能 ...
- Python基础(8)_迭代器、生成器、列表解析
一.迭代器 1.什么是迭代 1 重复 2 下次重复一定是基于上一次的结果而来 l=[,,,] count= while count < len(l): print(l[count]) count ...
- json教程系列(4)-optXXX方法的使用
在JSONObject获取value有多种方法,如果key不存在的话,这些方法无一例外的都会抛出异常.如果在线环境抛出异常,就会使出现error页面,影响用户体验,针对这种情况最好是使用optXXX方 ...
- Python学习进程(13)文件与IO
本节介绍基本的IO函数和文件的读写操作. (1)读取键盘输入: Python用于读取键盘输入的函数有两个:raw_input与input. 1)raw_input函数 从标准输入读取一 ...
- [原创]spring及springmvc精简版--AOP
接上一篇:[原创]spring及springmvc精简版--IOC 理解AOP.java是一种面向对象的语言.而AOP是面向切面,在我看来是面向逻辑或者业务编程,它是对一组逻辑的抽象和分配. 经典例子 ...
- android 7.0 (nougat)的编译优化-ninja
http://blog.csdn.net/songjam/article/details/52640501 版权声明:本文为博主原创文章,未经博主允许不得转载. 从官方的定义,ninja大大缩短了an ...