闭包和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. 循环绑定代码如下 ...
随机推荐
- MongoDb在windows下的安装与以auth方式启用服务
一.下载安装 1.去官网上下载适合自己电脑的MongoDB版本 下载MongoDB 2.安装MongoDB 安装还是比较简单,按照步骤一步一步往下走就可以了. 3.启动MongodDB 安装完成之后 ...
- Mybatis之基于XML的表之间映射
数据库表之间的关系有3种,一对一.一对多.多对多.既然是ORM,这肯定是必须有的.在学习EF的时候也有涉及,今天就是参考着EF的来学习下MyBatis的表关系映射. 一.准备工作 1.准备Model和 ...
- Vuethink正确安装过程
1. 下载项目vuethink,本例将项目放置website文件下. 2. 后台搭建 本地建站–>以phpstudy为例 1) 新建站点域名 <Virtual ...
- 急！！ftp登录错误，提示 530 not logged in，连接失败 ，，是怎么回事啊
愤怒地青鸟 | 浏览 68533 次 发布于2017-04-11 00:44 最佳答案 核心提示:Ftp登陆不了是很经常碰到的事,很多人常常是不加分析就发贴询问.老实说,这样既浪费自己时间,又浪费别人 ...
- Java面试经
最近趁有空整理下面试经常会被问到的知识点,参考的资料都是本人通过百度而挑选出来的,具有一定的参考意义. 一 .java基础1.String和StringBuffer.StringBuild的区别:ht ...
- python3 第二十章 - 函数式编程之Higher-order function（高阶函数）
什么是高阶函数?把函数作为参数传入或把函数做为结果值返回,这样的函数称为高阶函数,函数式编程就是指这种高度抽象的编程范式.函数式编程的特点: 函数本身可以赋值给变量,赋值后变量为函数: 允许将函数本身 ...
- Linux指令--cd,pwd
本文参照博客做了修改和总结,感谢作者的分享.http://www.cnblogs.com/peida/archive/2012/10/24/2736501.html cd 命令可以说是Linux中最基 ...
- Maven 常用配置
pom.xml基础配置: <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEn ...
- 解决eclipse maven工程中src/main/resources目录下创建的文件夹所显示样式不是文件夹，而是"包"图标样式的问题
参考:http://blog.csdn.net/luwei42768/article/details/72268246 eclipse项目中创建maven项目后,有时在执行命令maven update ...
- python---进程与线程
进程和线程 什么是线程(thread)什么是进程 线程:操作系统能够进行运算调度的最小单位.它被包含在进程中,是进程中的实际运作单位.是一串指令的集合 一个线程指的是进程中一个单一顺序的控制流,一个进 ...