闭包和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. 循环绑定代码如下 ...
随机推荐
- 教你如何解决Sublime Text 3使用中出现的中文乱码问题
Sublime Text 3 是一个非常不错的源代码及文本编辑器,但是不支持GB2312和GBK编码在很多情况下会非常麻烦. 不过Sublime Package Control所提供的插件可以让Sub ...
- 用NPOI导出Excel，生成下拉列表、以及下拉联动列表（第1篇/共3篇）
最近帅帅的小毛驴遇到一个很奇葩的需求: 导出Excel报表,而且还要带下拉框,更奇葩的是,下拉框还是联动的. 小毛驴一天比较忙,所以这等小事自然由我来为她分忧了.经历了两天,做了几种解决方案,最后完美 ...
- vue集成百度UEditor富文本编辑器
在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是 ...
- Oracle问题之字符集问题,登陆sqlplus出现问号
退出sql SET NLS_LANG=AMERICAN_AMERICA.ZHS16GBK show parameter nls_la
- Java数据持久层框架 MyBatis之API学习二（入门）
对于MyBatis的学习而言,最好去MyBatis的官方文档:http://www.mybatis.org/mybatis-3/zh/index.html 对于语言的学习而言,马上上手去编程,多多练习 ...
- MySql 修改外键 支持级联删除
首先必须要有外键,InnoDB甚么的都不说了,直接上修改句子. 要先删除该外键,然后添加. 具体原因貌似是因为不支持alter外键的操作. ALTER TABLE `t_terminal` DROP ...
- 以守护进程的方式部署flask
1.文件目录 创建一个简单的flask 项目... application = Flask(__name__) application.debug = True 2.安装wsgi pip instal ...
- MySQL数据引擎
InnoDB存储引擎 该引擎是MySQL数据库的默认事务型引擎,它被设计用来处理大量短期事务(绝大多数正常提交,很少回滚) InnoDB的数据存储在表空间中,表空间是由InnoDB管理的一个黑盒子,由 ...
- Redis-配置认证密码
1.找到redis.conf,配置密码 2.要重新启动一下redis 3.用redis-cli重新登陆,我们查询的时候提示"Authentication required"查询失败 ...
- sqlserver存储过程及mybatis调用——待续
创建带输入参数存储过程 use yanantestgoif exists (select * from sys.objects where name='yanan')drop procedure ya ...