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

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

fandy917

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

阅读量321

点赞数

分类专栏： 5月份JS部分文章标签： 5月份JS部分

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

版权

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

3 篇文章 0 订阅

订阅专栏

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

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

代码：匿名函数实现

<!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"> 
            /*
            *使用匿名函数
            *由于for循环执行的速度非常快，在点击之前就已经执行完了。再点击的时候i永远是5；
            *由于js是链式作用域，会往一层一层上寻找i的值，
            *当使用匿名函数以后，for循序中的匿名函数相当于创建了五个匿名函数，当i往上寻找的时候，
            * 都是找到function(i)的值，即是对应元素的下标值
            *从而找到对应span
             */
            var spans=document.getElementsByTagName('span');
            for(var i=0;i<spans.length;i++){
                (function(i){
                    spans[i].οnclick=function(){
                        console.log(i);
                        for(var j=0;j<spans.length;j++){
                            if(j==i){
                                spans[j].style.backgroundColor='#909'
                            }else{
                                spans[j].style.backgroundColor='#f0c'
                            }
                        }
                    }
                })(i)
            }
        </script>
    </body>
</html>

fandy917

关注

0
点赞
踩
2

收藏

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

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

扫一扫

专栏目录