美文网首页qwlz
javascript排他思想

javascript排他思想

作者: 9979eb0cd854 | 来源:发表于2018-07-23 15:24 被阅读4次

    排他思想:

    干掉所有人,设置我自己,先将所有人全设置为"",然后再设置当前的值

    1、含义: 关于排他思想,我的理解就是先排除掉其他的(包括自己) ,最后再给自己(this)加想要的效果。

    2、小思路:

    a. 通过document.ElementsBytagName();选择需要的一类标签,获得一个伪数组

    b.由于是伪数组的原因,而对数组的处理最多的是遍历,所以会用到for(); 通过循环可以排除掉其他(包括自己)

    c.遍历后可以用this改变自己的样式

    3、数组都会有下标(索引号),在遍历伪数组的时候就可以利用自定义属性记录它的索引号,如下 arr[i].index=i;

    比如:获得一组button标签,点击button按钮时,改变每个按钮的颜色

    html

          <button>点击改变颜色</button>
            <button>点击改变颜色</button>
            <button>点击改变颜色</button>
            <button>点击改变颜色</button>
            <button>点击改变颜色</button>
    

    css

     .yanse {
           background-color: aqua;
        }
    

    js

    <script>
            //获得一类button标签,得到伪类数组
            var btns = document.getElementsByTagName('button');
            /*
            由于是伪数组的原因,而对数组的处理最多的是遍历,
            所以会用到for(); 通过循环可以排除掉其他(包括自己)
            */
            for (var i = 0;i < btns.length;i++) {
                //给每个button加点击事件
                btns[i].onclick = function() {
    
                    //通过循环可以排除掉其他(包括自己)
                    for (var j = 0;j < btns.length;j++) {
                        //排除其他
                        btns[j].className = '';
                    }
                    //遍历后可以用this改变自己的样式
                    this.className = 'yanse';
                }
            }
        </script>
    

    效果图

    图片.png

    相关文章

      网友评论

        本文标题:javascript排他思想

        本文链接:https://www.haomeiwen.com/subject/twljmftx.html