闭包和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. 循环绑定代码如下 ...
随机推荐
- java与C++变量初始化的对比
java尽力保证:所有变量在使用前都能得到恰当的初始化 ①函数/方法局部变量的初始化 在C/C++中,变量的初始化还是得依赖于程序员的自觉性.对于函数局部变量,编译器不会为基本类型赋予默认初始值,新手 ...
- RPM包效验
- hash算法 (hashmap 实现原理)
Hash ,一般翻译做" 散列" ,也有直接音译为" 哈希" 的,就是把任意长度的输入(又叫做预映射, pre-image),通过散列算法,变换成固定长度的输出 ...
- the server responded with a status of 414 (Request-URI Too Large)
nginx 配置不当,前端ajax调用报错: the server responded with a status of 414 (Request-URI Too Large) 浏览器F12报错如下: ...
- spring cloud-zuul的Filter详解
在前面我们使用zuul搭建了网关http://blog.csdn.net/liuchuanhong1/article/details/59056278 关于网关的作用,这里就不再次赘述了,我们今天的重 ...
- Spark算子--SortByKey
转载请标明出处http://www.cnblogs.com/haozhengfei/p/076a31e7caab1316b07990c02ac65e9c.html SortByKey--Transf ...
- Lucene学习笔记2-Lucene的CRUD(V7.1)
在进行CRUD的时候请注意IndexWriterConfig的设置. public class IndexCRUD { "}; private String citys[]={"j ...
- ubuntu-apache下隐藏thinkphp入口文件index.php
按照thinkphp手册中来讲,apache服务器下,隐藏thinkphp入口文件有3步: httpd.conf配置文件中加载了mod_rewrite.so模块 AllowOverride None ...
- 007-declare 声明变量的类型
declare [+/-] [选项] 变量名 - 给变量设定类型 + 取消变量的类型 -a 将变量声明为数组型 -i 将变量声明为整形 -x 将变量声明成环境变量 -r 将变量声明为只读变量 -p 显 ...
- libev学习代码