JS事件绑定跟随切换（3）

最新推荐文章于 2024-04-16 19:44:59 发布

fandy917

最新推荐文章于 2024-04-16 19:44:59 发布

阅读量146

点赞数

分类专栏： 5月份JS部分

本文链接：https://blog.csdn.net/u014114347/article/details/80220741

版权

5月份JS部分专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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

代码：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>
      	<!--实现效果：点击某一个元素的时候让其改变样式，其他的恢复之前的样式-->
        <div class="box">
           <span>内容1</span>
           <span>内容2</span>
           <span>内容3</span>
           <span>内容4</span>
           <span>内容5</span>
        </div>
        <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].οnclick=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>

fandy917

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS事件绑定跟随切换（3）

实现效果：列如：当前有五个元素，当点击其中一个元素的时候只改变当前的样式，其他元素恢复之前的样式；总结了三种实现的方法：加深自己的理解，有错误望指正！万分感谢！代码：let声明实现，块级作用域；&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; ...
复制链接

扫一扫

专栏目录