闭包和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. 循环绑定代码如下 ...
随机推荐
- Python数据类型一：数字与运算符
数字 一.数值类型 python中支持的数值类型有以下几种: 1.整型(Int) - 通常被称为是整型或整数,是正或负整数,不带小数点.Python3 整型是没有限制大小的,可以当作 Long 类型使 ...
- DEDECMS中的几个常见的自定义常量DEDEMEMBER等位置
http://www.dede58.com/a/dedejq/3567.html dedecms新建栏目时默认都是允许投稿的,可以投稿本来对网站来说是件好事,但是dedecms是开源的,使用太广泛了, ...
- linux 下 用phpmailer类smtp发送邮件始终不成功，提示：ERROR: Failed to co
https://zhidao.baidu.com/question/509191264.html?fr=iks&word=PHPMailerSMTP+connect()+failed& ...
- Python3 的函数（2）
1.形参和实参 def MyFun(x): return x ** 3 y = 3 print(MyFun(y)) x为形参,y为实参. 2.函数文档 在函数内用单引号引起来的一段文字,在调用函数时不 ...
- C#中的基元类型、值类型和引用类型
C# 中的基元类型.值类型和引用类型 1. 基元类型(Primitive Type) 编译器直接支持的类型称为基元类型.基元类型可以直接映射到 FCL 中存在的类型.例如,int a = 10 中的 ...
- 【开发技术】java+mysql 更改表字段的步骤
1).首先通过SQL更改MYSQL库中的表结构(下面是一些例子) ALTER TABLE `illegalactivate` ADD `macethaddress` varchar(250) NOT ...
- python 实现词云
拿现在比较火的小说<大主宰>做测试,看看其中的关键词词云是啥 代码 import matplotlib.pyplot as plt from wordcloud import WordCl ...
- ASP.net core 2.0.0 中 asp.net identity 2.0.0 的基本使用（三）—用户账户及cookie配置
修改用户账户及cookie配置 一.修改密码强度和用户邮箱验证规则: 打开Startup.cs,找到public void ConfigureServices(IServiceCollection s ...
- Java高级工程师——面试总结
面试技巧 1.背熟你的简历 原因:面试的第一个问题,一般都是让你简单介绍下你自己,或者介绍一下你最近的项目,而一个面试者,如果连自己的简历都无法熟知,对里面提到的项目.技术都无法描述清楚的话,我想没有 ...
- Servlet--HttpUtils类
定义 public class HttpUtils 收集 HTTP Servlet 使用的静态的有效的方法. 方法 1.getRequestURL public static StringBuffer ...