闭包和es6实现循环绑定li输出固定索引值
首先我们需要一个html结构
<div >
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</div>
我们遍历ul 下所有的li 并添加点击事件，一般我们会在for循环里面添加点击事件，但是结果和我们所期盼不一样，那么是为什么呢？？？？
接下来看看我们的js代码
var li = document.getElementsByTagName('li');
for(var i = 0;i<li.length;i++){
(function(Index){
li[i].addEventListener('click',function(e){
alert('I am link #'+ Index );
},false);
})(i)
}
我们实现了！！！
这样就是得来我们想要的效果点击相应的li得来相应的索引。
简单说一下实现的过程吧
(function () { /* code */ } ()); // 推荐使用这个
(function () { /* code */ })(); // 但是这个也是可以用的
这是我整理立调函数或自执行函数；
本质上我们是利用闭包的原理实现弹出的索引，我们立调函数传一个参数Index，也就是我们的索引i，在函数里面实现了闭包，
Index会一直保留在作用域块内，这样我们再点击的时候，会调用作用域名内保存的索引，从而实现我们需要的功能；
我们几个简单的例子
function num(){
var i = 0;
return function(){
console.log(i++);
}
}
var counter = num();
console.log(counter()); // 0 undefined 函数执行完被销毁
var counter1 = (function(){
var i = 0;
return {
get:function(){
return i;
},
set:function(val){
i = val;
},
increment:function(){
return ++i;
}
}
}());
console.log(counter1); //Object
console.log(counter1.get()); // 0
console.log(counter1.set(3)); // undefined
console.log(counter1.increment()); //
console.log(counter1.increment()); //
---------------------------------------------------------------------------------------------------------------------------
如果使用ES6 语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script type="text/javascript">
// var ul1 = document.getElementById('ul1');
// for(var i=0;i<document.getElementsByTagName('li').length;i++){
// document.getElementsByTagName('li')[i].onclick = function(){
// alert(i);
// }
// }
// --------------------------------------------------------闭包
// var ul1 = document.getElementById('ul1');
// for(var i=0;i<document.getElementsByTagName('li').length;i++){
// (function(i){
// document.getElementsByTagName('li')[i].onclick = function(){
// alert(i);
// }
// })(i);
// }
// -------------------------------------------------------------ES6
var ul1 = document.getElementById('ul1');
for(let i=0;i<document.getElementsByTagName('li').length;i++){
document.getElementsByTagName('li')[i].onclick = function(){
alert(i);
}
}
</script>
</body>
</html>
闭包和es6实现循环绑定li输出固定索引值的更多相关文章
- 用闭包方式实现点击a标签弹也索引值
var self = document.getElementsByTagName("a"); for(var i=0;i<self.length;i++){ self[i]. ...
- javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
今天遇到一个问题,那就是当使用for循环批量注册事件处理函数,然后最后通过事件处理函数获取当前元素的索引值的时候会失败,先看一段代码实例: <script type="text/jav ...
- 前端（十三）—— JavaScript高级：回调函数、闭包、循环绑定、面向对象、定时器
回调函数.闭包.循环绑定.面向对象.定时器 一.函数高级 1.函数回调 // 回调函数 function callback(data) {} // 逻辑函数 function func(callbac ...
- JavaScript利用闭包循环绑定事件
我们经常在做前端面试题的时候,会遇到循环绑定事件后,输出打印结果,很多人总是搞不清楚,今天借此机会跟大家梳理一下闭包相关作用. 1.首先我们举一个简单的例子. html部分: <a href=& ...
- javascript闭包传参和事件的循环绑定
今天看到一个javascript的题目,按常理循环绑定事件,但是得到的结果却不是想要的. <a href="#">text</a><br>< ...
- JS闭包中的循环绑定处理程序
前几天工作中写前端js代码时,遇到了遍历元素给它添加单击事件.就是这个问题让我整整调了一个下午.最后还是下班回家,上网查资料才知道怎么解决的. (PS:之前也在<jQuery基础教程>第四 ...
- js循环给li绑定事件实现和弹出对应的索引
原文:http://www.cnblogs.com/wuchuanlong/p/5945286.html 方法一,动态添加click事件,并添加属性 var itemli = document.get ...
- js循环给li绑定事件实现 点击li弹出其索引值 和内容
代码如下: html代码 <ul> <li>房产</li> <li>家居</li> <li>二手房</li> < ...
- JS中循环绑定遇到的问题及解决方法
本文是原创文章,如需转载,请注明文章出处 在工作中,有时会有这样的需求:在一个页面上添加了6个按钮,然后分别为他们绑定点击事件监听器,当点击按钮1时,输出1,当点击按钮2时,输出2. 循环绑定代码如下 ...
随机推荐
- day1 基础
1.python 简介 一.python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的 ...
- Java数据结构和算法（十二）——2-3-4树
通过前面的介绍,我们知道在二叉树中,每个节点只有一个数据项,最多有两个子节点.如果允许每个节点可以有更多的数据项和更多的子节点,就是多叉树.本篇博客我们将介绍的——2-3-4树,它是一种多叉树,它的每 ...
- [国嵌攻略][104][Linux内核模块设计]
内核模块示例 #inlcude <linux/init.h> #inlcude <linux/module.h> static int hello_init(){ printk ...
- 有经验JAVA程序员如何提升自己？
作为一个具有一到五年开发经验程序员,需要学习内容很多: JVM/分布式/高并发/性能优化/Spring MVC/Spring Boot/Spring Cloud/MyBatis/Netty源码分析等等 ...
- Mysql 范围查询优化
Range查询:用单独的Index的一个或多个index值来检索表的子集行数据,当然包含多个index. 1:一个index (单一部分)的range access 方法:(eg : 指的这种key ...
- sqllite小型数据库的使用
1.适用场景:免安装型数据库:数据量不大,本地化管理:不依赖其他第三方类库:2.具体使用方法:添加sqllite类库引用 数据库连接定义,数据库以文件形式存储在sqllitedb/solution.d ...
- Windows10下用Anaconda3安装TensorFlow教程
这是我在自己的笔记本电脑上用Anaconda3安装TensorFlow的教程 1. 安装好Anaconda3版本 (1) 注:可以发现最新版本是Anaconda5了(没关系,下载就是了) (2) 注意 ...
- Log4j源码解析--Appender接口解析
本文转自上善若水的博客,原文出处:http://www.blogjava.net/DLevin/archive/2012/07/10/382676.html.感谢作者的无私的分享. Appender负 ...
- linkin大话面向对象--类和对象
我们每天在撸码,那么我们在敲什么东西呢?明显的我们在写类,写一个类,写一个接口,写某个接口里面写一些属性,在某个类里面写一个方法,然后以一个对象调用方法,对于j2ee来讲的话,可能还会写一些jsp,静 ...
- linkin大话面向对象--内部类
内部类说白了就是类中有类 内部类:嵌套类 外部类:宿主类 内部类主要有以下作用:记住了3个字:多继承... 1,内部类提供了更好的封装,可以把内部类隐藏在外部类中,不允许同一个包中的其他类访问该类. ...