当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS绑定事件跟随切换代码实例（3）

JS绑定事件跟随切换代码实例（3）

2019年01月16日  | 移动技术网IT编程  | 我要评论

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

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

代码：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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网