js小功能：全选，反选，添加，删除
```<script>
// json xml
let data = [
{
id: 1,
title: "",
checked: false,
collect: true
}, {
id: 2,
title: "",
checked: true,
collect: false
}, {
id: 3,
title: "",
checked: true,
collect: true
}, {
id: 4,
title: "",
checked: false,
collect: false
}, {
id: 5,
title: "",
checked: true,
collect: false //是否收藏 true 收藏 false 没有收藏
}
];
// 数据优先 视图渲染；
//是否全选
let isCheckAll = data=>data.every(item=>item.checked);
// 三目运算符
function renderDom(data) {
let container = document.querySelector("#list");
container.innerHTML = "";
// 根据数据生成dom
data.forEach((item) => {
let li = document.createElement("li");
li.innerHTML = `<input type="checkbox" class="check" ${item.checked ? 'checked' : ''} />
<span>${item.title}</span>
${item.collect ? '<a href="javascript:;" class="cancelCollect">取消收藏</a>' : '<a href="javascript:;" class="collect">收藏</a>'}
<a href="javascript:;" class="remove">删除</a>`;
container.appendChild(li);
})
addEvent();
document.querySelector("#checkAll").checked = isCheckAll(data);
}
renderDom(data);
function addEvent() {
let lis = document.querySelectorAll("#list li");
lis.forEach((li, key) => {
li.addEventListener("click", e => {
// console.log(e.target.className);
// 处理数据
switch (e.target.className) {
case 'check':
// console.log("check",e.target.checked);
data[key].checked = e.target.checked;
break;
case 'cancelCollect':
//console.log("cancelCollect");
data[key].collect = false;
break;
case 'collect':
data[key].collect = true;
break;
case 'remove':
data.splice(key, 1);
break;
default:
break;
}
// console.log(data);
renderDom(data);
})
})
}
// 三目运算符 数据驱动 事件委托
// 作业：在老师的代码基础上实现1.全选/全不选 2.添加音乐功能 3 删除指定音乐；
//全选或者全不选
document.querySelector("#checkAll").onclick = function(){
if(localStorage.getItem("data")){
let myData = JSON.parse(localStorage.getItem("data"));
myData.forEach(item=>{
item.checked = this.checked
});
localStorage.setItem("data",JSON.stringify(myData));
renderDom(myData);
};
}
//删除
document.querySelector("#remove").onclick = function(){
if(localStorage.getItem("data")){
let myData = JSON.parse(localStorage.getItem("data"));
let newData = myData.filter(item=>!item.checked);
localStorage.setItem("data",JSON.stringify(myData));
renderDom(newData);
};
}
//添加
document.querySelector("#add").onclick = function(){
if(localStorage.getItem("data")){
let value = document.querySelector("#newInfo").value;
let myData = JSON.parse(localStorage.getItem("data"));
let obj = {
id:(myData[myData.length-1].id + 1),
title:value,
checked:false,
collect:false
};
myData.push(obj);
renderDom(myData);
}
}
</script>
