DOM-案例 3

  

 

var box = document.querySelector(".box");
var btns = document.querySelectorAll("button"); // --> 类数组对象
//用3个按钮控制3种颜色，点击不同的按钮，box可以显示对应的颜色,按钮也显示对应颜色
//把按钮的颜色放入一个数组
var colorArry = ["green", "blue", "red"];
//主要逻辑 遍历btns 把bubbon和盒子的类名更改
for (var i = 0; i < btns.length; i++) {
    //点击按钮触发函数  对应的是函数事件  匿名函数需要用小括号
    btns[i].onclick = (function (a) {
        //因为i为全局变量，onclick 是点击时才触发，所以需要利用函数闭包
        return function () {
            //因为按钮颜色 只能显示一个 所以要用循环，把一开始的按钮类名去除
            for (var j = 0; j < btns.length; j++) {
                btns[j].className = " ";
            }
            //按钮颜色 
            this.className = colorArry[a];
            //盒子的颜色 box类名后面要加空格
            box.className = "box " + colorArry[a];
        }
        //让形参a = 实参i
    })(i);
}