1. 程式人生 > >for迴圈/btns/adiv

for迴圈/btns/adiv

當在一個for迴圈中,給每個btns加事件,在事件中,當前選中的btns會改變樣式,其他不變,同時對應序號的div也會改變寬度(或高幅度其他樣式)。 實現過程中,因為是給btns加事件,所以只要使用this.className就可以改變,但是對應序號的div無法選中。 ①做出幾下幾種改變:

 for(var i =0 ; i<ali.length ; i++){        
       ali[i].onclick = function(){
            for(var i = 0; i <ali.length; i++){
                ali[i].className = ' ';
        }
            this.className = 'active';
            adiv[i].style.width = 200+'px';
        }
    }
    會提示報錯:

Cannot read property ‘style’ of undefined at HTMLLIElement.ali.(anonymous function).onclick

for(var i =0 ; i <ali.length ; i++){
           ali[i].onclick = function(){
                var temp = i;  //在每個點選事件中獲取當前的i序號
                for(var i = 0; i <ali.length; i++){
                    ali[i].className = '';
            }
                this.className = 'active';
                adiv[temp].style.width = 200+'px';
            }
        }

 會提示相同錯誤提示

臥槽!!!!!!!終於對啦,跟老師鞠躬道歉是自己沒有認真看老師的寫法導自己浪費了人生在找錯誤。

        for(var i =0 ; i <ali.length ; i++){
        ali[i].index = i; //在每個點選按鈕上上新增屬性index,且第i個的index對應是i
         ali[i].onclick = function(){ 
            for(var i = 0; i <ali.length; i++){
            ali[i].className = '';
        }
            this.className = 'active';
            adiv[this.index].style.width = 200+'px';  //在div選擇對應序號的時候,使用this.index可以快速找到對應序號的div
        }

    }