您的位置：首页 > Web前端 > JavaScript

js循环动态绑定带参数函数遇到的问题及解决方案[转]

2015-08-05 13:31 726 查看

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

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

1
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" >
4 <head>
5 <title>Untitled Page</title>
6 </head>
7 <body>
8 <ul id="list">
9 <li>第1条记录</li>
10 <li>第2条记录</li>
11 <li>第3条记录</li>
12 <li>第4条记录</li>
13 <li>第5条记录</li>
14 <li>第6条记录</li>
15 </ul>
16 <script type="text/javascript">
17 var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组
18 for (var i = 0; i <= list_obj.length; i++) {
19 list_obj[i].onmouseover = function() {
20 this.style.backgroundColor = "#cdcdcd";
21 }
22 list_obj[i].onmouseout = function() {
23 this.style.backgroundColor = "#FFFFFF";
24 }
25 }
26 </script>
27 </body>
28 </html>

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

1
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" >
4 <head>
5 <title>Untitled Page</title>
6 </head>
7 <body>
8 <ul id="list">
9 <li>第1条记录</li>
10 <li>第2条记录</li>
11 <li>第3条记录</li>
12 <li>第4条记录</li>
13 <li>第5条记录</li>
14 <li>第6条记录</li>
15 </ul>
16 <script type="text/javascript">
17 var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组
18 for (var i = 0; i <= list_obj.length; i++) {
19 list_obj[i].onmousemove = function() {
20 this.style.backgroundColor = "#cdcdcd";
21 }
22 list_obj[i].onmouseout = function() {
23 this.style.backgroundColor = "#FFFFFF";
24 }
25 list_obj[i].onclick = function() {
26 alert("这是第" + i + "记录");
27 }
28 }
29 </script>
30 </body>
31 </html>

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

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

有什么好的办法解决这个问题吗？
　　看看什么是闭包：
　　闭包时是指内层的函数可以引用存在与包围他的函数内的变量，即使外层的函数的执行已经终止。
　　这个例子中我们可以这样做：

1
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" >
4 <head>
5 <title>Untitled Page</title>
6 </head>
7 <body>
8 <ul id="list">
9 <li>第1条记录</li>
10 <li>第2条记录</li>
11 <li>第3条记录</li>
12 <li>第4条记录</li>
13 <li>第5条记录</li>
14 <li>第6条记录</li>
15 </ul>
16 <script type="text/javascript">
17 function tt(nob) {
18 this.clickFunc = function() {
19 alert("这是第" + (nob + 1) + "记录");
20 }
21 }
22 var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组
23 for (var i = 0; i <= list_obj.length; i++) {
24 list_obj[i].onmousemove = function() {
25 this.style.backgroundColor = "#cdcdcd";
26 }
27 list_obj[i].onmouseout = function() {
28 this.style.backgroundColor = "#FFFFFF";
29 }
30 var col = new tt(i);
31 list_obj[i].onclick = col.clickFunc;
32 }
33 </script>
34 </body>
35 </html>

　　经过以上文章可以得知，引起这个问题的原因其实是因为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<count ;i++ )//循环绑定
21 {
22 var obj=document.getElementById("_subarea_hxax_clzjxxb_hxax_txzxxb_update_txzmc_" +i);
23 var tp = new bb(obj,i);//解决闭包问题，new一个新的函数类
24 obj.onchange = tp.clickFunc;
25 }
26 }
27 //显示页面时执行一次
28 addFunction();

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航