求助，關于for循環中的函數
?for(var i= 0,len = xli.length;i<len;i++){
xxx(i);
}
function xxx(i){
xli[i].onclick=function(){
for(var n= 0;n<len;n++){
? ? ? ? ? ? ? ? ? ? ? ? ?xli[n].className = "";
? ? ? ? ? ? ? ? ? ? ? ? ?xDivs[n].className = "cont";
}
xli[i].className = "on";
xDivs[i].className="";
}?
? ?}
}
如上代碼是可行的。但是將xxx這個函數替換掉xxx(i)位置就不可行了。什么原因呢？
2016-05-03
for(var i= 0,len = xli.length;i<len;i++){
? ?xli[i].onclick=function(){
? ? ? ?for(var n= 0;n<len;n++){
? ? ? ? ? ?xli[n].className = "";
? ? ? ? ? ?xDivs[n].className = "cont";
? ? ? ?}
? ? ? ?xli[i].className = "on";
? ? ? ?xDivs[i].className="";
? ?}
}這是你想改成的代碼吧
先說一下for循環的時候做了什么吧，給每一個li綁定了一個onclick事件，然后for循環就結束了
，到這里一切都正常
問題出在onclick觸發時，
xli[i].className = "on";
xDivs[i].className="";
執行上述2個語句，i是多少，由于本身onclick事件綁定的匿名函數里沒有i的相關定義，按照作
用域鏈，向上一級查找i，這時在for循環里找到i的定義，此時i是多少呢，由于for循環早就跑完
了，onclick事件也早綁完了，所以i是len-1，到此，就錯誤了。
那么提問那種方法為什么沒錯，因為把i作為參數，在傳參的過程中給保存了，每一個li對應的i
值都被保存了，保存在函數xxx的參數i里，防止2個i你分不清楚，我給改寫一下你看的明白。
function xxx(obj){//參數obj保存了當時i的值
xli[i].onclick=function(){//綁定事件時，i向上從for循環里取當時的i值
for(var n= 0;n<len;n++){
? ? ? ? ? ? ? ? ? ? ? ? ?xli[n].className = "";
? ? ? ? ? ? ? ? ? ? ? ? ?xDivs[n].className = "cont";
}
xli[obj].className = "on";//觸發事件后，找obj的值，向上一級查找，找到參數obj，值為當時i的
值
xDivs[obj].className="";
}?
? ?}
到此，就是說，想要不出現i值錯誤，就要保存一下i值，上面那種作為參數保存是一種，標準答
案提供的是另一種
for(var i= 0,len = xli.length;i<len;i++){
? ?xli[i].obj=i;//給li自定義了一個obj屬性，保存當時的i值，每一個li都有一個obj屬性，來
保存對應的i值
? xli[i].onclick=function(){
? ? ? ?for(var n= 0;n<len;n++){
? ? ? ? ? ?xli[n].className = "";
? ? ? ? ? xDivs[n].className = "cont";
? ? ? }
? ? ? ?this.className = "on";//this為觸發onclick的li
? ? ? ?xDivs[this.obj].className="";//this.obj值為觸發onclick的li當時的i值
? }
}
還有很多種方法，比如i值保存在函數屬性里，比如i值保存在一個局部變量里，重點都在于把每
個li對應的i值給保存住，js有一個重要知識點叫做閉包，也可以用來保存i值，這里不做多講，
可以自己查詢了解一下。
2016-06-23
這時在for循環里找到i的定義，此時i是多少呢，由于for循環早就跑完
了，onclick事件也早綁完了，所以i是len-1，到此，就錯誤了。
就是這句話，不是很明白。。。
2016-06-23
for(var i= 0,len = xli.length;i<len;i++){
? ?xli[i].onclick=function(){
? ? ? ?for(var n= 0;n<len;n++){
? ? ? ? ? ?xli[n].className = "";
? ? ? ? ? ?xDivs[n].className = "cont";
? ? ? ?}
? ? ? ?xli[i].className = "on";
? ? ? ?xDivs[i].className="";
? ?}
}這是你想改成的代碼吧
這個i并沒有執行完吧，都是從0開始的呀。xli[0],xli[1]....依次往后的呀
2016-05-03
<!DOCTYPE html>
<html>
<head lang="en">
? ?<meta charset="UTF-8">
? ?<title></title>
</head>
<body>
for循環內的i值:<input class="f1" /><br>
for循環外的i值:<input class="f2" />
<script>
? ?(function a(){
? ? ? ?for(var i=0;i<5;i++)
? ? ? ?{
? ? ? ? ? ?var f1=document.getElementsByClassName("f1");
? ? ? ? ? ?f1[0].value=i;
? ? ? ?}
? ? ? ?var f2=document.getElementsByClassName("f2");
? ? ? ?f2[0].value=i;
? ?})();
</script>
</body>
</html>