前几天工作中写前端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. CoreData 数据库更新，数据迁移

    本文转载至 http://blog.163.com/djx421@126/blog/static/48855136201411381212985/   一般程序app升级时,数据库有可能发生改变,如增 ...

  2. 使用filezilla连接树莓派失败

    报错: 错误: Network error: Connection refused 错误: 无法连接到服务器 原因是新版的树莓派系统默认关闭ssh,进入树莓派打开ssh即可. sudo service ...

  3. Shell xargs

    from here 简介之所以能用到这个命令,关键是由于很多命令不支持|管道来传递参数,而日常工作中有有这个必要,所以就有了xargs命令,例如: 这个命令是错误的find /sbin -perm + ...

  4. 一些有用的java 框架

    jwt  用于生成web toke的类库 http://jwt.io/ jasypt java加密类库 http://www.jasypt.org/

  5. 【前端积累】Awesome初识

    前言 之所以要看这个,是因为在看到的一个网站里图表显示的全屏和缩小,anyway ,还是看一下咯~ 一.介绍 Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何 ...

  6. js 的空值判断程序

    function empty(v){ switch (typeof v){ case 'undefined' : return true; case 'string' : if($.trim(v).l ...

  7. Metaspolit使用简介

    信息收集阶段 Whois信息收集 msf auxiliary > whois baidu.com 域名信息查询阶段 msf auxiliary > nslookup www.baidu.c ...

  8. Internet Explorer 9 已安装在此系统上

    问题: win7系统,IE11浏览器,想换成IE9,安装IE9的时候,提示错误. 解决方案: 方案一: 1.打开 控制面板--程序--程序和功能--点击打开或者关闭Windows功能,找到Intern ...

  9. 关于在Linux下apache-maven的安装

    本文所涉及到的软件如下:jdk版本号:1.7.0_45apache-maven版本号:3.1.1 apache-maven的安装过程如下: apache-maven的官方网址:http://maven ...

  10. selenium下firefox自动下载配置及问题

    在做自动化测试时,需要从网页上下载相关的文件到指定的目录,一直未能实现 网上正好有个blog文章介绍了如何下载 直接上代码: from selenium import webdriver import ...