<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<meta name="author" content="">
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body,
dl,
dd,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
ol,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none;
}
#wrap {
width: 300px;
padding-top: 20px;
border: 1px solid #bbb;
border-radius: 15px;
margin: 50px auto;
user-select: none;
}
#wrap ul.list li {
width: 100%;
height: 50px;
line-height: 50px;
font-size: 14px;
text-indent: 70px;
cursor: pointer;
color: #fff;
background: url("img/ckbg1.jpg") no-repeat 20px center;
}
#wrap ul.list li.click {
background-image: url('img/ckbg2.jpg')
}
#wrap .btn {
overflow: hidden;
width: 100%;
height: 50px;
}
#wrap .btn p {
float: left;
line-height: 50px;
margin-left: 50px;
background: url("img/ckbg1.jpg") no-repeat 0 center;
text-indent: 23px;
font-size: 14px;
cursor: pointer;
}
#wrap .btn p.click {
background-image: url("img/ckbg2.jpg");
}
#wrap .btn p.fan {
background-image: none;
}
</style>
</head>
<body>
<div id="wrap">
<ul class="list">
</ul>
<div class="btn">
<p class="all">全选</p>
<p class="fan">反选</p>
</div>
</div>
<script>
//数据
let data = [{
txt: '一一'
}, {
txt: '二二'
}, {
txt: '三三'
}, {
txt: '四四'
}, {
txt: '五五'
}, {
txt: '六六'
}]
// 获取元素(元素的变量)
let oUl = document.querySelector('#wrap .list');
let aLi = oUl.getElementsByTagName('li')//页面加了内容才有li，所以用get动态获取
let oAll = document.querySelector('#wrap .btn .all');
let oFan = document.querySelector('#wrap .btn .fan')
//定义变量
let len = data.length;
let num = 0//记录选中的个数
//循环添加数据
let html = '';
let color = ['#222', '#555', '#888', '#bbb'];
let colorlen = color.length;
data.forEach((item, index) => {
html += `<li style="background-color:${color[index % colorlen]}">${item.txt}</li>`
})
oUl.innerHTML = html;
//li绑定事件
// for(let i=0;i<len;i++){
// aLi[i].onclick =function(){
// this.classList.toggle('click')//切换类名 toggle 删除/添加功能
// }}
//也可以forEach写法
[...aLi].forEach((oLi, index) => {
oLi.onclick = function () {
this.classList.toggle('click')//切换类名 toggle 删除/添加功能
// if(this.classList.contains('click')){//contains判断元素是具有某个类名,有增加，删除减少
// num++
// } else{
// num--
// }
this.classList.contains('click') ? num++ : num--//contains判断元素是具有某个类名,有增加，删除减少
ifFullNum();
}
})
//只要技术num发生变化就会触发这个函数
function ifFullNum() {
if (num == len) {
oAll.classList.add('click')
} else {
oAll.classList.remove('click') //对象属性可以打点调用，也可中括号字符串调用,[]中可以写表达式。 oAll.classList['remove']
}
// oAll.classList[num==len ? 'add' :'remove']('click') //三目优化写法
}
// 点击全选
oAll.onclick = function () {
this.classList.toggle('click'); //切换
//根据oAll元素是否具有click类名，判断是否全选
let bol = this.classList.contains('click');
let attr = bol ? 'add' : 'remove';
//循环添加类名
[...aLi].forEach((oLi, index) => {
oLi.classList[attr]('click');
})
num == bol ? len : 0;
}
//反选
oFan.onclick = function () {
[...aLi].forEach((oLi, index) => {
oLi.classList.toggle('click')
})
num = len - num;
ifFullNum()
}
</script>
</body>
</html>
网友评论