前几天工作中写前端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. Java网络编程之TCP通信

    一.概述 Socket类是Java执行客户端TCP操作的基础类,这个类本身使用代码通过主机操作系统的本地TCP栈进行通信.Socket类的方法会建立和销毁连接,设置各种Socket选项. Server ...

  2. ngingx安装错误 ./configure: error: the HTTP rewrite module requires the PCRE library.

    有时候,我们需要单独安装nginx,来处理大量的下载请求.单独在Centos5安装nginx遇到的rewrite和HTTP  cache错误解决办法: wget http://nginx.org/do ...

  3. sklearn特征抽取

    特征抽取sklearn.feature_extraction 模块提供了从原始数据如文本,图像等众抽取能够被机器学习算法直接处理的特征向量. 1.特征抽取方法之 Loading Features fr ...

  4. springboot---->springboot中的格式化（一）

    这里面我们简单的学习一下springboot中关于数据格式化的使用.我以为你不是个好人,没想到你连个坏人都不是. springboot中的格式化 我们的测试环境是springboot,一个将字符串格式 ...

  5. spring应用中多次读取http post方法中的流（附源码）

    一.问题简述 先说下为啥有这个需求,在基于spring的web应用中,一般会在controller层获取http方法body中的数据. 方式1: 比如http请求的content-type为appli ...

  6. sonarqube插件开发(三) 调试插件

    环境 windows + eclipse +sonarqube server 5.6.4 准备 新建一个maven项目,其中加入了一些插件所用的jar <project xmlns=" ...

  7. Artech的MVC4框架学习——第八章View的呈现

    总结:定义在controller中的action方法一般会返回actionResult的对象对请求给予 响应.viewResult是最常见也是最重要的ActionView的一种(p411).view模 ...

  8. [算法]Bobmer

    package com.company; import com.sun.org.apache.bcel.internal.generic.AASTORE; import java.awt.*; imp ...

  9. python unittest框架中doCleanups妙用

    偶看unittest官方文档中,发现一个很好用的功能函数doCleanups,看看官方是怎么解释的: doCleanups() This method is called unconditionall ...

  10. java的HashMap 原理

    https://www.cnblogs.com/chengxiao/p/6059914.html 哈希表(hash table)也叫散列表,是一种非常重要的数据结构,应用场景及其丰富,许多缓存技术(比 ...