个人中心
gpt4 book ai didi

浅谈JS闭包中的循环绑定处理程序

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章浅谈JS闭包中的循环绑定处理程序由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

前几天工作中写前端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闭包中的循环绑定处理程序的理解，分享给大家，希望能对小伙伴们有所帮助 。

最后此篇关于浅谈JS闭包中的循环绑定处理程序的文章就讲到这里了,如果你想了解更多关于浅谈JS闭包中的循环绑定处理程序的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： Spring(AbstractRoutingDataSource)实现动态数据源切换示例
文章推荐： IDEA中进行Docker项目部署的实现步骤
文章推荐： jQuery函数map()和each()介绍及异同点分析
文章推荐： js跨域问题浅析及解决方法优缺点对比
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com