今寫js時遇到一問題，要用內函數引用外函數的變量，我知道 用函數閉包能解決這個問題 ，但沒寫成，故參考了些博客，並複製了此文章，用作參考。
我遇問題，並解決實現代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>五角星評級</title>
<style type="text/css">
#rating tr td{
cursor:pointer;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
inittable();
};
function inittable(){
var table=document.getElementById("rating");
var tr=table.getElementsByTagName("tr");
for(var i=0;i<tr.length;i++){
var td=tr[i].getElementsByTagName("td");
for(var j=0;j<td.length;j++){
/*當我爲每個單元格綁定一個事件函數時，該函數需要調用上面的for語句j變量，所以用函數閉包 完美的解決了這個問題*/
(function(j,td){
td[j].οnclick=function(){
for(var s=0;s<td.length;s++){
td[s].innerHTML="☆";
}
for(var s=0;s<=j;s++){
td[s].innerHTML="※";
}
}})(j,td)
}
}
}
</script>
</head>
<body >
<table id="rating">
<tr>
<td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
</tr>
<tr>
<td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
</tr>
<tr>
<td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
</tr>
</table>
</body>
</html>
實現圖片如下
![]()
下面是轉載的原文：
沒有彈出框
我遇問題，並解決實現代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>五角星評級</title>
<style type="text/css">
#rating tr td{
cursor:pointer;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
inittable();
};
function inittable(){
var table=document.getElementById("rating");
var tr=table.getElementsByTagName("tr");
for(var i=0;i<tr.length;i++){
var td=tr[i].getElementsByTagName("td");
for(var j=0;j<td.length;j++){
/*當我爲每個單元格綁定一個事件函數時，該函數需要調用上面的for語句j變量，所以用函數閉包 完美的解決了這個問題*/
(function(j,td){
td[j].οnclick=function(){
for(var s=0;s<td.length;s++){
td[s].innerHTML="☆";
}
for(var s=0;s<=j;s++){
td[s].innerHTML="※";
}
}})(j,td)
}
}
}
</script>
</head>
<body >
<table id="rating">
<tr>
<td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
</tr>
<tr>
<td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
</tr>
<tr>
<td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
</tr>
</table>
</body>
</html>
實現圖片如下
下面是轉載的原文：
沒有彈出框
|
1
2
3
4
5
6
7
|
<script language="javascript"type="text/javascript">functionstart(){varnid=document.getElementsByTagName("li");nid.onclick=function(){alert("4");}}window.onload=start;</script> |
這樣纔有彈出對話框
|
1
2
3
4
5
6
7
|
<script language="javascript"type="text/javascript">functionstart(){varnid=document.getElementsByTagName("li");nid.onclick=(function(){alert("4");})()}window.onload=start;</script> |
運行後，不論點擊哪一個li，都是alert提示“4”。
這就是一個需要注意的地方：
閉包允許內層函數引用父函數中的變量，但是該變量是最終值。閉包引用的變量i，是循環結束後的值
|
1
2
3
4
5
6
|
<script language="javascript"type="text/javascript">varli=document.getElementsByTagName("li");for(vari=0;i<li.length;i++){li[i].onclick=function(){alert(i);}}</script> |
用閉包來解決
<script language="javascript" type="text/javascript">
var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
(function(index){
li[index].οnclick=function(){alert(index);}
})(i);
}
</script>
var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
(function(index){
li[index].οnclick=function(){alert(index);}
})(i);
}
</script>
注意順序：先彈出“clicked” 再彈出“also clicked”
|
1
2
3
4
5
6
7
|
<script>varfnClick1 =function(){ alert("clicked");
};varfnClick2 =function(){ alert("also
clicked"); };varoDiv = document.getElementById("div");oDiv.attachEvent("onclick",fnClick2);oDiv.attachEvent("onclick",fnClick1);</script> |
先彈出“also clicked” 再彈出“clicked”
|
1
2
3
|
varoDiv = document.getElementById("div");oDiv.attachEvent("onclick",fnClick1);oDiv.attachEvent("onclick",fnClick2); |
.onclick後面的是最先執行的
attachEvent進去的事件 就DOM的解釋是亂續的。
但實際測試時 IE是後綁定的先執行,FF是先綁定的先執行.
作者：曾祥展
出處：學無止境-博客園 （http://www.cnblogs.com/zengxiangzhan/）版權聲明：本文的版權歸作者與博客園共有。轉載時須註明本文的詳細鏈接，否則作者將保留追究其法律責任。