qwlz

javascript排他思想

2018-07-23  本文已影响4人  9979eb0cd854

排他思想:

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

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
上一篇 下一篇

猜你喜欢

热点阅读