前几天工作中写前端js代码时，遇到了遍历元素给它添加单击事件。就是这个问题让我整整调了一个下午。最后还是下班回家，上网查资料才知道怎么解决的。 （PS：之前也在《jQuery基础教程》第四版中看过讲循环绑定处理程序的内容，当时估计也没怎么用心看，所以没记起来。）
　　大神要是知道这类情况，可以关掉窗口，写这些主要是给像我一样的小白看的。谢谢！

　　先贴上错误的例子让大家看看。（例子里面用到jQuery，请导入jQuery库）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

　　<title>循环绑定处理程序</title>

　　<script src="js/jquery-2.1.1.min.js"></script>

　　<script type="text/javascript">

　　　　$(function(){

　　　　　　for(var i=1;i<=4;i++){

　　　　　　　　$("#btn"+i).get(0).onclick=function(){

　　　　　　　　　　alert(i);

　　　　　　　　}

　　　　　　}

　　　　});

　　</script>

</head>

<body>

　　<button id="btn1">按钮1</button>

　　<button id="btn2">按钮2</button>

　　<button id="btn3">按钮3</button>

　　<button id="btn4">按钮4</button>

</body>

</html>

　　这段代码运行之后，点击按钮，弹出的alert中显示数据几呢，我之前一直认为按钮1到按钮4，对应的alert中的数字也是1到4。要是你也这样想，那就错了。 
　　点击每个按钮，alert中都是显示数字4，没想到吧！ 
　　现在写几种解决方案，共大家参考 ！
　　第一种、编写一个function，在这个function中返回一个函数 

<script type="text/javascript">

　　$(function(){

　　　　for(var i=1;i<=4;i++){

　　　　　　$("#btn"+i).get(0).onclick=btnClick(i); 

　　　　}

　　});

　　var btnClick=function(value){

　　　　return function(){

　　　　　　alert(value);

　　　　}

　　}

</script>

　　第二种、使用立即调用函数表达式 
　　(function(value){ 
　　　　//代码块 
　　})(i)//这就是立即调用函数表达式

<script type="text/javascript">

　　$(function(){

　　　　for(var i=1;i<=4;i++){

　　　　　　$("#btn"+i).get(0).onclick=(function(value){

　　　　　　　　return function(){

　　　　　　　　alert(value);

　　　　　　} })(i); 

　　　　}

　　});

</script>

　　第三种、使用jQuery的each函数 

<script type="text/javascript">

　　$(function(){

　　　　$.each([1,2,3,4],function(index,value){

　　　　　　　　$("#btn"+value).get(0).onclick=function(){

　　　　　　　　alert(value);

　　　　　　}

　　　　});

　　});

</script>

　　使用上面三种情况，就可以避免一开始那个情况了。 
　　其中get(0)指的是将jQuery对象转为DOM对象。

JS闭包中的循环绑定处理程序的更多相关文章

  1. js闭包中的this（匿名函数中的this指向的是windows）

    js闭包中的this(匿名函数中的this指向的是windows) 一.总结 1.普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样 2.让匿名函数中的thi ...

  2. js闭包中注意文字总结

    //闭包注意的点 //闭包中使用外部变量不是复制而是引用 //闭包可以节省传递参数问题 //在循环中使用闭包

  3. swift闭包中解决循环引用的问题

    swift中可以通过三种方法解决循环引用的问题 利用类似oc方法解决循环引用weak var weakSelf = self weak var weakSelf = self loadData = { ...

  4. JS闭包中的this对象

    我们知道,当函数被作为某个对象的方法调用时,this等于那个对象,不过,匿名函数的执行环境具有全局性,因此其this对象通常指向window. 下面代码很好的说明了这一点: var name = 'T ...

  5. JS&Jquery中的循环/遍历

    JavaScript中的遍历 for 遍历 var anArray = ['one','two']; for(var n = 0; n < anArray.length; n++) { //具体 ...

  6. Angularjs 中 ng-repeat 循环绑定事件

    用ng-repeat循环是如果有ng-click之类的事件需要传入参数我们一般这样写 <span class='del' ng-click="RemoveCost({{item.Id} ...

  7. 前端（十三）—— JavaScript高级：回调函数、闭包、循环绑定、面向对象、定时器

    回调函数.闭包.循环绑定.面向对象.定时器 一.函数高级 1.函数回调 // 回调函数 function callback(data) {} // 逻辑函数 function func(callbac ...

  8. js闭包绑定元素

    闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点: 1. 作为一个函数变量的一个引用,当函数返回时,其处于激活状 ...

  9. js闭包陷阱问题

    JavaScript是一种非常强大的函数式编程语言,可以动态创建函数对象. 由于JavaScript还支持闭包(Closure),因此,函数可以引用其作用域外的变量,非常强大. 来看看在JavaScr ...

随机推荐

  1. SVN设置没有写log不能commit

    操作方法:在SVN的Repositories下,找到要配置的项目,在项目目录下找到hooks文件夹,在其下创建pre-commit.bat文件,把下面复制进去就可以了(无需重启,如果改动,保存bat文 ...

  2. Python中常见的字符串小笔试题

    1.获取实现两个字符串中最大的公共子串 思路:    1.比较两个字符串的长度 2.获取较短字符串的所有子串 3.使用__contains__函数进行比较 4.把子串当做键,子串长度作为值,存入字典, ...

  3. 【LeetCode OJ】Remove Nth Node From End of List

    题目:Given a linked list, remove the nth node from the end of list and return its head. For example: G ...

  4. Python学习(22):模块

    转自 http://www.cnblogs.com/BeginMan/p/3183656.html 一.模块基础 1.模块 自我包含,且有组织的代码片段就是模块 模块是Pyhon最高级别的程序组织单元 ...

  5. IOS设计模式第十篇之命令行设计模式

    命令行设计模式: 命令设计模式将一个请求或行动作封装为对象.这个封装请求比原始的请求要灵活并且可以在对象之前被传递,存储,动态修改或者放进队列里面.苹果 苹果公司实现这种模式使用Target-Acti ...

  6. Win8应用开发 入门篇（三） UX交互导航模式

    导航模式(Windows 应用商店应用)   在本文中 分层模式 画布上导航 顶部应用栏 语义式缩放 相关主题 组织 Windows 应用商店应用中的内容,以便用户可以轻松而直观地进行导航.使用正确的 ...

  7. 【Python系列】python关键字、符号、数据类型等分类

    https://github.com/AndyFlower/Python/blob/master/sample/python前言如下部分为python关键字,操作符号,格式字符.转义字符等,以后有时间 ...

  8. 使用 webpack 优化资源

    在前端应用的优化中,对加载资源的大小控制极其的重要,大多数时候我们能做的是在打包编译的过程对资源进行大小控制.拆分与复用.本片文章中主要是基于 webpack 打包,以 React.vue 等生态开发 ...

  9. Nokia 920全部CODE

    code码都是7位,我是从别的地方copy过来的,code码后面带了些乱码懒得删了,自己数7位code就是了. RM-820 NDT AMERICA ATT White        059N5T3R ...

  10. WCF错误"The maximum message size quota for incoming messages (65536) has been exceeded."

    错误原因有三:超过最大接受的传输值 1.webconfig或者 app.config 文件中的binding 节点进行 配置 maxBufferSize="2147483647" ...