js循环动态绑定带参数函数遇到的问题及解决方案[转]
今天寫原生javascript時(shí)，想利用綁定事件實(shí)現(xiàn)類似jquery中on方法的功能：于是有了for循環(huán)里綁定事件，無意中發(fā)現(xiàn)定義類能解決好多問題！
例如：一個(gè)不確定長度的列表，在鼠標(biāo)經(jīng)過某一條的時(shí)候改變背景
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下面的所有l(wèi)i的對(duì)象數(shù)組 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> 繼續(xù)：添加一個(gè)顯示“這是第幾條記錄”的功能
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下面的所有l(wèi)i的對(duì)象數(shù)組 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> ? ? ? 運(yùn)行后我們發(fā)現(xiàn)，一直不論點(diǎn)擊哪個(gè)li都顯示“這是第6條記錄”。
? ? ??其實(shí)這里for循環(huán)已將整個(gè)列表循環(huán)了一遍，并執(zhí)行了i++，所以這里i變成了6。
? ? ??有什么好的辦法解決這個(gè)問題嗎？ ?
看看什么是閉包：
閉包時(shí)是指內(nèi)層的函數(shù)可以引用存在與包圍他的函數(shù)內(nèi)的變量，即使外層的函數(shù)的執(zhí)行已經(jīng)終止。
這個(gè)例子中我們可以這樣做：?
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下面的所有l(wèi)i的對(duì)象數(shù)組 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> 經(jīng)過以上文章可以得知，引起這個(gè)問題的原因其實(shí)是因?yàn)閖s的閉包難題。按照面向?qū)ο蟮腏AVA語言的理解可以解釋為：js循環(huán)動(dòng)態(tài)綁定帶參數(shù)函 數(shù)中的參數(shù)，其實(shí)相當(dāng)于java中的引用傳遞，而非值傳遞。傳遞進(jìn)來的引用只相當(dāng)于一個(gè)指針，指向的是一個(gè)內(nèi)存地址，這個(gè)內(nèi)存地址存放的才是具體的值，而 外面的循環(huán)會(huì)不斷的修改這個(gè)存放地址中的值，所以最后循環(huán)結(jié)束之后，參數(shù)的值只能找到最后一個(gè)。
知道了原因就很好解決了。New一個(gè)新的“函數(shù)類”（姑且這么稱呼吧）。測(cè)試OK。一下是修改后的代碼：
1
2 //在新增按鈕上綁定函數(shù)
3 document.getElementById("add").attachEvent("onclick",addFunction); 4 var jc_count = 0;//定義需要改變第幾行的值 5 function txzmcFunction(x,y){//下拉框中綁定的函數(shù) 6 var sql="select txzjc from dm_txzmc where dm='"+x.value+"'";//取得下拉框中的代碼，通過ajax獲得相應(yīng)的中文名稱 7 jc_count = y;//定義當(dāng)前行是第幾行 8 ajaxSelect(sql,"txzjcFunction");//封裝的ajax函數(shù) 9 } 10 function txzjcFunction(x){//接收封裝的ajax函數(shù)返回值，并賦值 11 document.getElementById("_subarea_hxax_clzjxxb_hxax_txzxxb_update_txzjc_"+jc_count).value=x; 12 } 13 function bb(dx,sz){//解決動(dòng)態(tài)綁定閉包問題要用到函數(shù) 14 this.clickFunc=function(){ 15 txzmcFunction(dx,sz);//調(diào)用相應(yīng)的函數(shù) 16 } 17 } 18 function addFunction(){ //動(dòng)態(tài)循環(huán)綁定 19 var count=document.getElementById("_subarea_hxax_clzjxxb_hxax_txzxxb_update_maxcount").value;//獲取最大的行數(shù) 20 for (var i=0;i<count ;i++ )//循環(huán)綁定 21 { 22 var obj=document.getElementById("_subarea_hxax_clzjxxb_hxax_txzxxb_update_txzmc_" +i); 23 var tp = new bb(obj,i);//解決閉包問題，new一個(gè)新的函數(shù)類 24 obj.onchange = tp.clickFunc; 25 } 26 } 27 //顯示頁面時(shí)執(zhí)行一次 28 addFunction();
轉(zhuǎn)載于:https://www.cnblogs.com/zhhc/p/4704481.html
總結(jié)
以上是生活随笔為你收集整理的js循环动态绑定带参数函数遇到的问题及解决方案[转]的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 百度查下，吴康五伟人瓷板画价格值多少钱？
- 下一篇： 28号，雪梨机器人还有吗，是29号的前一