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

最新推荐文章于 2022-02-22 11:38:15 发布

fandy917

最新推荐文章于 2022-02-22 11:38:15 发布

阅读量244

点赞数

分类专栏： 5月份JS部分

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

版权

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"> 
            /*
             * 给每一个元素添加一个属性index.记下当前是第几个元素
             * 结合数组加上标志位，
             * 如果点击了就将对应的flag数组的值变为1
             * 此刻点击的的时候，1有可能是之前点击过的，如果是之前点击的则j!=this.index
             * 				     2如果是此刻点击的，则j==this.index
            
             */
            var spans=document.getElementsByTagName('span');
            var flag=[0,0,0,0,0];
            for(var i=0;i<spans.length;i++){
                spans[i].index=i;
                spans[i].οnclick=function(){
                	
                    flag[this.index]=1;
                    for(var j=0;j<flag.length;j++){
                    	//判断是否点击过，并且是不是现在点击的这个元素
                        if(j==this.index && flag[j]==1){
                            spans[j].style.backgroundColor='#909'
                        }else if(flag[j]==1&&j!=this.index){
                        	//之前已经点击过，但是不是现在点击的元素
                            spans[j].style.backgroundColor='#f0c'
                        }
                    }
                }           
            }

        </script>
    </body>
</html>