欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS绑定事件跟随切换代码实例(3)

程序员文章站 2022-04-22 23:25:20
实现效果:列如:当前有五个元素,当点击其中一个元素的时候只改变当前的样式,其他元素恢复之前的样式; 总结了三种实现的方法:加深自己的理解,有错误望指正!万分感谢! 代码:let...

实现效果:列如:当前有五个元素,当点击其中一个元素的时候只改变当前的样式,其他元素恢复之前的样式;

总结了三种实现的方法:加深自己的理解,有错误望指正!万分感谢!

代码:let声明实现,块级作用域;

<!doctype html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <style type="text/css">  
        *{padding: 0;margin: 0;}  
        .box{  
            width: 300px;  
            height: 30px;  
            margin:50px auto;  
        }  
        span{  
            display:inline-block;  
            width: 50px;height: 30px;  
            background-color: #f0c;  
            color:#fff;  
            text-align: center;  
            line-height: 30px;  
        }  
        </style>  
    </head>  
    <body>  
        <!--实现效果:点击某一个元素的时候让其改变样式,其他的恢复之前的样式-->  
        <p class="box">  
           <span>内容1</span>  
           <span>内容2</span>  
           <span>内容3</span>  
           <span>内容4</span>  
           <span>内容5</span>  
        </p>  
        <script type="text/javascript">   
            /*let是es6新增的  
             * let: 代码块内的变量声明  
             *  1)变量声明不会提前  
             *  2)块级作用域  
             *  3)let不允许相同作用域内多次声明同一变量  
             * 此时的i只会存在for循环当中,除了for循环就销毁掉  
             * 与之前的var声明的链级作用域不同  
             */  
            var spans=document.getelementsbytagname('span');  
            for(let i=0;i<spans.length;i++){  
                spans[i].onclick=function(){  
                    //j可以用let声明  
                    for(var j=0;j<spans.length;j++){  
                        if(j==i){  
                            spans[j].style.backgroundcolor='#909'  
                        }else{  
                            spans[j].style.backgroundcolor='#f0c'  
                        }  
                    }  
                }                 
            }  
        </script>  
    </body>  
</html>