博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js循环动态绑定带参数函数遇到的问题及解决方案[转]
阅读量:4638 次
发布时间:2019-06-09

本文共 1837 字,大约阅读时间需要 6 分钟。

今天写原生javascript时,想利用绑定事件实现类似jquery中on方法的功能:于是有了for循环里绑定事件,无意中发现定义类能解决好多问题!

例如:一个不确定长度的列表,在鼠标经过某一条的时候改变背景

1   2   3   4   5 Untitled Page 6  7  8 
    9
  • 第1条记录
  • 10
  • 第2条记录
  • 11
  • 第3条记录
  • 12
  • 第4条记录
  • 13
  • 第5条记录
  • 14
  • 第6条记录
  • 15
16 27 28

继续:添加一个显示“这是第几条记录”的功能

1   2   3   4   5 Untitled Page 6  7  8 
    9
  • 第1条记录
  • 10
  • 第2条记录
  • 11
  • 第3条记录
  • 12
  • 第4条记录
  • 13
  • 第5条记录
  • 14
  • 第6条记录
  • 15
16 30 31

      运行后我们发现,一直不论点击哪个li都显示“这是第6条记录”。

      其实这里for循环已将整个列表循环了一遍,并执行了i++,所以这里i变成了6。

      有什么好的办法解决这个问题吗?  

  看看什么是闭包:
  闭包时是指内层的函数可以引用存在与包围他的函数内的变量,即使外层的函数的执行已经终止。
  这个例子中我们可以这样做: 

1   2   3   4   5 Untitled Page 6  7  8 
    9
  • 第1条记录
  • 10
  • 第2条记录
  • 11
  • 第3条记录
  • 12
  • 第4条记录
  • 13
  • 第5条记录
  • 14
  • 第6条记录
  • 15
16 34 35

  经过以上文章可以得知,引起这个问题的原因其实是因为js的闭包难题。按照面向对象的JAVA语言的理解可以解释为:js循环动态绑定带参数函 数中的参数,其实相当于java中的引用传递,而非值传递。传递进来的引用只相当于一个指针,指向的是一个内存地址,这个内存地址存放的才是具体的值,而 外面的循环会不断的修改这个存放地址中的值,所以最后循环结束之后,参数的值只能找到最后一个。

知道了原因就很好解决了。New一个新的“函数类”(姑且这么称呼吧)。测试OK。一下是修改后的代码:

1   2 //在新增按钮上绑定函数  3 document.getElementById("add").attachEvent("onclick",addFunction); 4 var jc_count = 0;//定义需要改变第几行的值 5 function txzmcFunction(x,y){ //下拉框中绑定的函数 6 var sql="select txzjc from dm_txzmc where dm='"+x.value+"'";//取得下拉框中的代码,通过ajax获得相应的中文名称 7 jc_count = y;//定义当前行是第几行 8 ajaxSelect(sql,"txzjcFunction");//封装的ajax函数 9 } 10 function txzjcFunction(x){ //接收封装的ajax函数返回值,并赋值 11 document.getElementById("_subarea_hxax_clzjxxb_hxax_txzxxb_update_txzjc_"+jc_count).value=x; 12 } 13 function bb(dx,sz){ //解决动态绑定闭包问题要用到函数 14 this.clickFunc=function(){ 15 txzmcFunction(dx,sz);//调用相应的函数 16 } 17 } 18 function addFunction(){ //动态循环绑定 19 var count=document.getElementById("_subarea_hxax_clzjxxb_hxax_txzxxb_update_maxcount").value;//获取最大的行数 20 for (var i=0;i

转载于:https://www.cnblogs.com/zhhc/p/4704481.html

你可能感兴趣的文章
IdentityServer4结合AspNetCore.Identity实现登录认证踩坑填坑记录
查看>>
hdu 1251 统计难题
查看>>
tcpdump 抓网卡的数据包
查看>>
旅行社微信电子会员卡系统asp源码
查看>>
我希望四年前就有人告诉我的事情--创业必须知道的事情
查看>>
Dijkstra算法详解
查看>>
马尔可夫方程的解
查看>>
#敏捷个人# 第二批敏捷个人推广者实践团报名
查看>>
敏捷开发本质 与 敏捷个人本质
查看>>
.vimrc
查看>>
Coding源码学习第一部分(AppDelegate.m)
查看>>
VS使用过程中的一些问题
查看>>
极限编程在WEB开发中的作用
查看>>
printf的使用
查看>>
NLP Attention
查看>>
PHP 之数据类型判断
查看>>
第二次冲刺 站立会议3
查看>>
LA3029最大子矩阵
查看>>
万网域名MX解析设置方案[net.cn, ubuntu]
查看>>
403. Frog Jump
查看>>