ECS6基础-案例：百度音乐全选、添加、收藏、删除功能

2024-02-10 08:49:58

百度音乐案例

同上篇文章类似，都基于ECS6基础知识，重点在于掌握逻辑语法，css样式等不做过多追求

1. 实现功能

添加音乐到列表
选中效果
删除所选音乐
收藏和取消收藏
全选功能和全不选功能
实现效果如图：

2. 写好的主体元素框架和样式图

这个案例，我将样式写成css文件引入到html文件中
html元素代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 引入css样式 -->
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" class="check" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
      <li>
        <input type="checkbox" class="check" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>

    </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>
  </section>

css样式代码如下：（样式比较简陋，建议大家根据需求自行添加和修改样式）

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
h2 {
  margin: 0;
}
#wrap {
  margin: 30px auto;
  width: 482px;
  padding: 5px;
  position: relative;
  border: 1px solid #000;
  background: #eee;
}
.title {
  font: bold 18px/40px "宋体";
  text-align: center;
  border-bottom: 1px solid #000;
}
#list {
  padding-left: 2px;
}
#list li {
  opacity: 0.8;
  font: 14px/36px "宋体";
  border-bottom: 1px solid #000;
}
#list li:hover {
  opacity: 1;
}
#list label input {
  margin: 0 20px 0 30px;
}
input[type="chekbox"] {
  width: 20px;
  height: 20px;
}
.footer {
  font: 16px/36px "宋体";
}

3. 渲染视图功能

同理，按照数据驱动策略，将渲染函数单独封装，封装思路如下
1. 获取DOM中的列表元素，并清空
2. 使用forEach循环传入的数据，为每个数据创建一个< li >标签
3. 在每个< li >标签中添加单选框、span标签、a标签
4. 将创建的< li >元素添加到DOM中
5. 调用事件功能
6. 判断是否全选或全不选
代码如下：

  <script>
    let data = [
      {
        id: 1,
        title: "残酷月光 - 林宥嘉",
        checked: false,
        collect: true
      }, {
        id: 2,
        title: "光年之外 - 邓紫棋",
        checked: false,
        collect: false
      }, {
        id: 3,
        title: "永不失联的爱 - 周兴哲",
        checked: true,
        collect: true
      }, {
        id: 4,
        title: "小美好 - BKPP",
        checked: false,
        collect: false
      }, {
        id: 5,
        title: "百战成诗 - 群星",
        checked: true,
        collect: false //是否收藏 true 收藏 false 没有收藏
      }
    ];
    // 数据优先；
    // 渲染视图；
    function renderData(data) {
      document.querySelector("#list").innerHTML = "";
      data.forEach(item => {
        let liEle = document.createElement("li");
        liEle.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>`;
        document.querySelector("#list").appendChild(liEle)
       })
      addEvent();

      // 判断是否全选；->判断数据
      let isCheckAll = data.every(item=>item.checked);
      // console.log(isCheckAll)
      if(isCheckAll){
          document.querySelector("#checkAll").checked = true;
      }else{
        document.querySelector("#checkAll").checked = false;
      }
    }
    renderData(data);

4. 绑定事件

每一个< li >标签里点击对应元素后有相应的功能实现
为了方便整洁，使用switch方法，根据不同的case，对相应的数据进行操作，实现需求
最后渲染视图
代码如下：

function addEvent(){
    // 绑定事件
    let liEles = document.querySelectorAll("#list li");
    //伪数组解构后循环
    [...liEles].forEach((item,key)=>{
    
        item.onclick = function(e){
          console.log(e.target.className);
          switch(e.target.className){
            case 'check':
              // console.log("input",e.target.checked)
              data[key].checked = e.target.checked;
              break;
            case 'cancelCollect':
            // console.log("取消收藏")
              data[key].collect = false;
              break;
            case 'remove':
              console.log("删除");
              data.splice(key,1);
              break;
            case 'collect':
            console.log("收藏")
              data[key].collect = true;
              break;
          }
          // 渲染视图；
          renderData(data);
        }
    })

    }

5. 全选/全不选功能

获取到DOM元素点击后，进行数据循环，修改所有数据的checked属性
然后渲染视图
代码如下：

// 点击全选；
document.querySelector("#checkAll").onclick = function(){
  data.forEach(item=>{
    item.checked = this.checked;
  })
  renderData(data);
}

6. 删除功能

获取到DOM元素点击后，利用数组的filter方法进行过滤，返回一个新数组
将新数组渲染到视图
代码如下

//点击删除
document.querySelector("#remove").onclick = function(){
  let newData =  data.filter(item=>!item.checked);
  renderData(newData);
}

7. 添加功能

获取到DOM元素点击后
先拿到输入框的数据
将数据利用push方法添加到data中，这里默认不选中和未收藏
渲染视图
代码如下

// 添加功能
document.querySelector("#add").onclick = function(){
  var addstr=document.getElementById("newInfo").value;
  console.log(data)
  data.push({"id":6,"title":addstr,"checked":false,"collect":false});
  console.log(data)
  renderData(data);
}

html全部代码附上：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 引入css样式 -->
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" class="check" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
      <li>
        <input type="checkbox" class="check" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>

    </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>
  </section>
  <script>
    let data = [
      {
        id: 1,
        title: "残酷月光 - 林宥嘉",
        checked: false,
        collect: true
      }, {
        id: 2,
        title: "光年之外 - 邓紫棋",
        checked: false,
        collect: false
      }, {
        id: 3,
        title: "永不失联的爱 - 周兴哲",
        checked: true,
        collect: true
      }, {
        id: 4,
        title: "小美好 - BKPP",
        checked: false,
        collect: false
      }, {
        id: 5,
        title: "百战成诗 - 群星",
        checked: true,
        collect: false //是否收藏 true 收藏 false 没有收藏
      }
    ];
    // 数据优先；
    // 渲染视图；
    function renderData(data) {
      document.querySelector("#list").innerHTML = "";
      data.forEach(item => {
        let liEle = document.createElement("li");
        liEle.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>`;
        document.querySelector("#list").appendChild(liEle)
       })
      addEvent();

      // 判断是否全选；->判断数据
      let isCheckAll = data.every(item=>item.checked);
      // console.log(isCheckAll)
      if(isCheckAll){
          document.querySelector("#checkAll").checked = true;
      }else{
        document.querySelector("#checkAll").checked = false;
      }
    }
    renderData(data);

    function addEvent(){
    // 绑定事件
    let liEles = document.querySelectorAll("#list li");
    // console.log(liEles);
    [...liEles].forEach((item,key)=>{
 
        item.onclick = function(e){
          console.log(e.target.className);
          switch(e.target.className){
            case 'check':
              // console.log("input",e.target.checked)
              data[key].checked = e.target.checked;
              break;
            case 'cancelCollect':
            // console.log("取消收藏")
              data[key].collect = false;
              break;
            case 'remove':
              console.log("删除");
              data.splice(key,1);
              break;
            case 'collect':
            console.log("收藏")
              data[key].collect = true;
              break;
          }
          // 渲染视图；
          renderData(data);
        }
    })

    }
    
// 点击全选/全不选；
document.querySelector("#checkAll").onclick = function(){
  data.forEach(item=>{
    item.checked = this.checked;
  })
  renderData(data);
}
//点击全不选
document.querySelector("#remove").onclick = function(){
  let newData =  data.filter(item=>!item.checked);
  renderData(newData);
}

// 添加功能
document.querySelector("#add").onclick = function(){
  var addstr=document.getElementById("newInfo").value;
  console.log(data)
  data.push({"id":6,"title":addstr,"checked":false,"collect":false});
  console.log(data)
  renderData(data);

}
  </script>
</body>

</html>

9. 总结

案例还有很多不足的地方，例如每次页面刷新，数据又会恢复到默认情况（数据没有持久性），例如添加的时候，没有判断输入框是否为空情况，例如样式简陋等等，这些可以在实际编写中，根据需求进行更改
巩固自己的同时，希望可以帮到大家~

码农公寓

百度音乐案例

同上篇文章类似，都基于ECS6基础知识，重点在于掌握逻辑语法，css样式等不做过多追求

1. 实现功能

2. 写好的主体元素框架和样式图

3. 渲染视图功能

4. 绑定事件

5. 全选/全不选功能

6. 删除功能

7. 添加功能

html全部代码附上：

9. 总结

相关文章