找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发面向对象中的 全选事件

2018-07-30 分类：JavaScript 阅读(652) 评论(0)

前端开发面向对象开发实例|如何接前端开发的单子|web前端开发会基础能就业吗

案例代码如下：

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>大学生就业搞前端开发</title>
    <style>
        body {
            background-color: #FAEBCC;
        }
        #music {
            width: 400px;
            height: 200px;
            border: 1px solid #000000;
            border-radius: 10px;
            margin: 100px auto;
            position: relative;
        }
        ul {
            margin: 0;
            padding: 0;
            width: 100%;
            list-style: none;
            position: absolute;
            top: 10px;
        }
        .checkBox {
            width: 20px;
            height: 20px;
            border: 1px solid #000;
            display: inline-block;
            vertical-align: middle;
            margin-left: 30px;
        }
        .checkBox em {
            display: block;
            margin: 5px auto;
            width: 10px;
            height: 5px;
            border-left: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotateZ(-45deg);
            display: none;
        }
        .active em {
            display: block;
        }
        span {
            display: inline-block;
        }
        span:nth-of-type(1) {
            width: 200px;
            padding-left: 10px;
        }
        span:nth-of-type(2) {
            width: 100px;
            text-align: right;
        }
        .allBox {
            width: 100%;
            bottom: 10px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id=”music”>
        <ul>
            <li>
                <div class=”checkBox”>
                    <em></em>
                </div>
                <span>泡沫</span>
                <span>邓紫棋</span>
            </li>
            <li>
                <div class=”checkBox”>
                    <em></em>
                </div>
                <span>说爱你</span>
                <span>蔡依林</span>
            </li>
            <li>
                <div class=”checkBox”>
                    <em></em>
                </div>
                <span>稻香</span>
                <span>周杰伦</span>
            </li>
            <li>
                <div class=”checkBox”>
                    <em></em>
                </div>
                <span>我的梦</span>
                <span>张靓颖</span>
            </li>
            <li>
                <div class=”checkBox”>
                    <em></em>
                </div>
                <span>怎么说我不爱你</span>
                <span>萧敬腾</span>
            </li>
            <li>
                <div class=”checkBox”>
                    <em></em>
                </div>
                <span>无处安放</span>
                <span>白若溪</span>
            </li>
        </ul>
        <div class=”allBox”>
            <div id=”all” class=”checkBox”>
                <em></em>
            </div>
            <span>全选</span>
        </div>
    </div>
</body>
<script>
    var box = document.querySelector(‘#music’);
    function MusicBox(obj) {
        this.ul = obj.querySelector(‘ul’);
        this.lis = obj.querySelectorAll(‘li’);
        this.checkAll = obj.querySelector(‘#all’);
        this.num = 0;
        this.init();
    }
    //初始化
    MusicBox.prototype.init = function () {
        this.change();//隔行变色
        this.move();//移入
        this.out();//移出
        this.allCheck();//全选
        this.Check();//单选
    }
    //隔行变色
    MusicBox.prototype.change = function () {
        for (var i = 0; i < this.lis.length; i++) {
            if (i % 2 == 1) {
                this.lis[i].style.backgroundColor = ‘pink’;
                this.lis[i].oldColor = ‘pink’;
            } else {
                this.lis[i].style.backgroundColor = ‘white’;
                this.lis[i].oldColor = ‘white’;
            }
        }
    }
    //移入
    MusicBox.prototype.move = function () {
        var _this = this;
        _this.state = false;
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].onmouseover = function () {
                if (!_this.state) {
                    this.style.backgroundColor = ‘yellow’;
                }
            }
        }
    }
    //移出
    MusicBox.prototype.out = function () {
        var _this = this;//存一下，避免下面的代码中的this指向出现错误
        _this.state = false;
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].onmouseout = function () {
                if (!_this.state) {
                    this.style.backgroundColor = this.oldColor;
                }
            }
        }
    }
    // //全选
    MusicBox.prototype.allCheck = function () {
        this.checkAll.checked = false;
        //全选按钮事件
        this.checkAll.onclick = () => {
            //修改自己的状态
            if (this.checkAll.checked) {
                this.checkAll.className = ‘checkBox’;
                this.checkAll.checked = false;
                this.num = 0;
            } else {
                this.checkAll.className = ‘checkBox active’;
                this.checkAll.checked = true;
                this.num = this.lis.length;
            }
            //其他的选择框要跟着全选按钮的状态变化
            for (var i = 0; i < this.lis.length; i++) {
                if (this.checkAll.checked) {
                    //当全选按钮被选择时 做的事情
                    this.lis[i].className = ‘active’;
                    this.lis[i].style.backgroundColor = ‘yellow’;
                    this.lis[i].state = true;
                } else {
                    //当全选按钮被取消选择时 做的事情
                    this.lis[i].className = ”;
                    this.lis[i].style.backgroundColor = this.lis[i].oldColor;
                    this.lis[i].state = false;
                }
            }
        };
    }
    //单选
    MusicBox.prototype.Check = function () {
        var _this = this;
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].state = false;
            //单选事件
            this.lis[i].onclick = function () {
                //如果是被选中状态 就要取消 否则 就设置成被选中状态
                if (this.state) {//这个this是指向上面的this.lis[i]
                    //取消颜色 和 状态
                    this.style.backgroundColor = this.oldColor;
                    this.state = false;//取消点击的状态
                    this.className = ”;
                    _this.num–;
                } else {
                    //添加颜色 和 状态
                    this.style.backgroundColor = ‘yellow’;
                    this.state = true;//设置被点击的状态
                    this.className = ‘active’;
                    _this.num++;
                }
                //检查是否全选
                if (_this.num == _this.lis.length) {
                    _this.checkAll.checked = true;
                    _this.checkAll.className = ‘checkBox active’;
                } else {
                    _this.checkAll.checked = false;
                    _this.checkAll.className = ‘checkBox’;
                }
            };
        }
    }
    //new实例化对象
    var box_1 = new MusicBox(box);
</script>
</html>

前端开发工作去哪里找|前端开发必备工具|前端开发常用发工具是

赞(0)
前端开发者 » 前端开发面向对象中的 全选事件
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论