网页音乐 案例思路及写法
有些情况下,我们往往是接收到后台给的数据,然后针对数据进行页面编写
- 基本的页面框架
<h2 class="title">百度音乐榜单</h2>
<ul id="list">
</ul>
<footer class="footer">
<label><input type="checkbox" id="checkAll" />全选/全不选</label>
<a href="javascript:;" id="remove">删除</a>
<input type="text" id="newInfo" />
<a href="javascript:;" id="add">添加</a>
</footer>
抽离数据
let data = [
{
id: 0,
title: "左手指月 - 咻咻满",
checked: true,
collect: true
},{
id: 1,
title: "桥边姑娘 - 花僮",
checked: false,
collect: false
},{
id: 2,
title: "走不出的回忆 - 任然",
checked: false,
collect: false
},{
id: 3,
title: "小雪 - 雪无影",
checked: false,
collect: false
},{
id: 4,
title: "大雪 - 王梓钰",
checked: true,
collect: false //是否收藏 true 收藏 false 没有收藏
}
];
数据同步视图
- every / some
- every
每一项都返回 true / false
全部返回值为 true , 最终结果为true ;否则返回 false - some
有一项返回true,结果即为 true
- every
{
let list = document.querySelector("#list");
let checkAll = document.querySelector("#checkAll");
// 根据数据渲染结构
let render = () => {
list.innerHTML = data.map(item => {
return `
<li>
<input type="checkbox" ${item.checked?"checked":""} />
<span>${item.txt}</span>
<a href="javascript:;" class="remove">删除</a>
</li>
`;
}).join("");
// 全选
checkAll.checked = data.every(item=>item.checked);
};
render();
}
添加相应的操作
- forEach
每一项执行相同的操作
/* 数据的操作方法 */
// 添加一条数据
let add = (txt) => {
data.push({
id: Date.now(),
txt,
checked: false
});
render();
};
let newInfo = document.querySelector("#newInfo");
let addBtn = document.querySelector("#add");
addBtn.onclick = ()=>{
add(newInfo.value);
};
// 修改选中状态
let changeChecked = (id,checked)=>{
data.forEach(item=>{
if(item.id == id){
item.checked = checked;
}
});
render();
};
事件委托
- filter( )
过滤器,构建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
filter不会改变原数组;不会对空数组进行检测;每个元素都会执行
// 事件委托(事件代理): 利用事件冒泡,将自身的事件委托给父祖级来进行处理
// let {target} = event; 解构赋值
list.onchange = ({target})=>{
let li = target.parentNode;
changeChecked(li.dataset.id,target.checked);
}
//删除单项
let remove = (id)=>{
data = data.filter(item=>item.id!=id);
rander();
}
list.onclick = ({target})=>{
if(target.className == "remove"){
remove(target.parentNode.dataset.id);
}
}
let removeAll = document.querySelector("#remove");
//删除选中项目
removeAll.onclick = ()=>{
console.log(data)
//1.checked 默认值为 false
//2.点击之后为 true
//3.因为要返回为false的值
//4.所以对true取反
// data = data.filter(item=>!item.checked);
data = data.filter(item=>{
// console.log(item.checked);
return !item.checked;
});
rander();
}
收藏与未收藏
// 收藏 和 取消收藏
function collect(id){
data.forEach(item=>{
if(item.id == id){
item.collect = true;
}
});
rander();
}
function cancelCollect(id){
data.forEach(item=>{
if(item.id == id){
item.collect = false;
}
});
rander();
}
- 补充:
sort( )
可规定排序顺序,必须为函数,原数组上排序不产生副本
arr = arr.sort(
( a - b ) => {
return a - b ;
// a - b 升序排列(小于0)
// b - a 降序排列(大于0)
}
);
- 资源下载地址
自行寻找