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
        }

    }