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

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

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

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

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

代码:给事件加属性标记,结合数组实现

<!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">   
            /*  
             * 给每一个元素添加一个属性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].onclick=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>