for循环/btns/adiv

最新推荐文章于 2024-08-06 14:26:07 发布

原创最新推荐文章于 2024-08-06 14:26:07 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#错误日志

本文探讨了在JavaScript中利用事件循环为多个按钮添加点击事件，通过改变按钮样式及关联div元素宽度的方法。作者详细记录了解决过程中的常见错误与最终正确实践，包括如何正确引用当前点击按钮的序号来定位并修改对应的div元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当在一个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
        }

    }