From e81a2804449f091571466072f5df0d706f3ae32c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=B5=B7=E7=91=9E?= <3148024859@qq.com>
Date: Mon, 4 Dec 2023 23:19:59 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=AC18=E6=AC=A1=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...13\350\200\205\350\215\243\350\200\200.md" | 338 ++++++++++++++++++
 1 file changed, 338 insertions(+)
 create mode 100644 "50 \345\274\240\350\265\267\347\221\236/20231204   \347\216\213\350\200\205\350\215\243\350\200\200.md"
diff --git "a/50 \345\274\240\350\265\267\347\221\236/20231204   \347\216\213\350\200\205\350\215\243\350\200\200.md" "b/50 \345\274\240\350\265\267\347\221\236/20231204   \347\216\213\350\200\205\350\215\243\350\200\200.md"
new file mode 100644
index 0000000..b2ea6b8
--- /dev/null
+++ "b/50 \345\274\240\350\265\267\347\221\236/20231204   \347\216\213\350\200\205\350\215\243\350\200\200.md"	
@@ -0,0 +1,338 @@
+
+
+## 价格筛选
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>商品渲染</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .list {
+      width: 990px;
+      margin: 0 auto;
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .item {
+      width: 240px;
+      margin-left: 10px;
+      padding: 20px 30px;
+      transition: all .5s;
+      margin-bottom: 20px;
+    }
+
+    .item:nth-child(4n) {
+      margin-left: 0;
+    }
+
+    .item:hover {
+      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+      transform: translate3d(0, -4px, 0);
+      cursor: pointer;
+    }
+
+    .item img {
+      width: 100%;
+    }
+
+    .item .name {
+      font-size: 18px;
+      margin-bottom: 10px;
+      color: #666;
+    }
+
+    .item .price {
+      font-size: 22px;
+      color: firebrick;
+    }
+
+    .item .price::before {
+      content: "¥";
+      font-size: 14px;
+    }
+
+    .filter {
+      display: flex;
+      width: 990px;
+      margin: 0 auto;
+      padding: 50px 30px;
+    }
+
+    .filter a {
+      padding: 10px 20px;
+      background: #f5f5f5;
+      color: #666;
+      text-decoration: none;
+      margin-right: 20px;
+    }
+
+    .filter a:active,
+    .filter a:focus {
+      background: #05943c;
+      color: #fff;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="filter">
+    <a data-index="1" href="javascript:;">0-100元</a>
+    <a data-index="2" href="javascript:;">100-300元</a>
+    <a data-index="3" href="javascript:;">300元以上</a>
+    <a href="javascript:;">全部区间</a>
+  </div>
+  <div class="list">
+    <!-- <div class="item">
+      <img src="" alt="">
+      <p class="name"></p>
+      <p class="price"></p>
+    </div> -->
+  </div>
+  <script>
+    // 2. 初始化数据
+    const goodsList = [
+      {
+        id: '4001172',
+        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
+        price: '289.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
+      },
+      {
+        id: '4001594',
+        name: '日式黑陶功夫茶组双侧把茶具礼盒装',
+        price: '288.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg',
+      },
+      {
+        id: '4001009',
+        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
+        price: '109.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
+      },
+      {
+        id: '4001874',
+        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
+        price: '488.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
+      },
+      {
+        id: '4001649',
+        name: '大师监制龙泉青瓷茶叶罐',
+        price: '139.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
+      },
+      {
+        id: '3997185',
+        name: '与众不同的口感汝瓷白酒杯套组1壶4杯',
+        price: '108.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',
+      },
+      {
+        id: '3997403',
+        name: '手工吹制更厚实白酒杯壶套装6壶6杯',
+        price: '100.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg',
+      },
+      {
+        id: '3998274',
+        name: '德国百年工艺高端水晶玻璃红酒杯2支装',
+        price: '139.00',
+        picture: 'https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg',
+      },
+    ]
+
+    // 1. 渲染函数  封装
+    function render(arr) {
+      // 声明空字符串
+      let str = ''
+      // 遍历数组 
+      arr.forEach(item => {
+        // 解构
+        const { name, picture, price } = item
+        str += `
+         <div class="item">
+          <img src=${picture} alt="">
+          <p class="name">${name}</p>
+          <p class="price">${price}</p>
+        </div> 
+        `
+      })
+      // 追加给list 
+      document.querySelector('.list').innerHTML = str
+    }
+    render(goodsList)  // 页面一打开就需要渲染
+
+    // 2. 过滤筛选  
+    document.querySelector('.filter').addEventListener('click', e => {
+      // e.target.dataset.index   e.target.tagName
+      const { tagName, dataset } = e.target
+      // 判断 
+      if (tagName === 'A') {
+        // console.log(11) 
+        // arr 返回的新数组
+        let arr = goodsList
+        if (dataset.index === '1') {
+          arr = goodsList.filter(item => item.price > 0 && item.price <= 100)
+          console.log(arr);
+        } else if (dataset.index === '2') {
+          arr = goodsList.filter(item => item.price >= 100 && item.price <= 300)
+        } else if (dataset.index === '3') {
+          arr = goodsList.filter(item => item.price >= 300)
+        }
+        // 渲染函数
+        render(arr)
+      }
+    })
+  </script>
+</body>
+
+</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>英雄</title>
+  <link rel="stylesheet" href="./css/hero.css" />
+  <link rel="stylesheet" href="./css/comm-v1.css" />
+</head>
+
+<body>
+  <div class="herolist-box">
+    <div class="clearfix herolist-types">
+      <ul class="types-left">
+        <li>综合</li>
+        <li>定位</li>
+      </ul>
+      <ul class="clearfix types-ms">
+        <li data-ptype="10">
+          <span class="ms-radio"><i class="i"></i></span>
+          <label>本周免费</label>
+        </li>
+        <li data-ptype="11">
+          <span class="ms-radio"><i class="i"></i></span>
+          <label>新手推荐</label>
+        </li>
+      </ul>
+      <ul class="clearfix types-ms">
+        <li class="current" data-type="0">
+          <span class="ms-radio"><i class="i"></i></span>
+          <label>全部</label>
+        </li>
+        <li data-type="3">
+          <span class="ms-radio"><i class="i"></i></span>
+          <label>坦克</label>
+        </li>
+        <li data-type="1">
+          <span class="ms-radio"><i class="i"></i></span>
+          <label>战士</label>
+        </li>
+        <li data-type="4">
+          <span class="ms-radio"><i class="i"></i></span>
+          <label>刺客</label>
+        </li>
+        <li data-type="2">
+          <span class="ms-radio"><i class="i"></i></span>
+          <label>法师</label>
+        </li>
+        <li data-type="5">
+          <span class="ms-radio"><i class="i"></i></span>
+          <label>射手</label>
+        </li>
+        <li data-type="6">
+          <span class="ms-radio"><i class="i"></i></span>
+          <label>辅助</label>
+        </li>
+      </ul>
+    </div>
+    <div class="herolist-content">
+      <ul class="herolist clearfix">
+        <!-- <li >
+          <a href="#" target="_blank"><img src="" width="91" height="91" alt="曜" />曜</a>
+        </li> -->
+      </ul>
+    </div>
+  </div>
+
+  <!-- 数组比较多，放在了外接的js文件中 -->
+  <script src="./hero.js"></script>
+  <script>
+  
+   //根据给的数组来渲染英雄
+   function render(array){
+    //第一种方法，使用这个方法时，接得把array改成arry
+   //array就是给它的数组
+   //遍历数组，将数组的对象，转换成html的格式。最终填充到ul里
+    // let str = '';
+    // arry.forEach(li =>{
+    // //   "icon": "./images/105.jpg",
+    // // "name": "廉颇",
+    // // "pay_type": 10,
+    // // "hero_type": 3,
+    // const { icon,name } = li;//解构对象，得到对象的各个属性
+    // str += `<li>
+    // <a href="#" target="_blank"><img src="${icon}" width="01" height="91" alt+"${name}"/>${name}</a>
+    // </li>`;
+    // })
+    // //将拼接完成的str填充到ul里
+    // document.querySelector('.herolist').innerHTML =str;
+  //第二种方法
+  document.querySelector('.herolist').innerHTML = array.map(li =>  `<li><a href="#" target="_blank"><img src="${li.icon}" 
+    width="01" height="91" alt+"${li.name}"/>${li.name}</a></li>`).join('');
+
+
+   }
+   //执行一次渲染
+   render(heroArr);
+    
+   //获取元素
+   const li1 = document.querySelectorAll('ul.types-ms>li');
+   //添加点击事件
+   li1.forEach(li => {
+    li.addEventListener('click',function (){
+    //谁有current的样式，谁就先取消
+    document.querySelector('li.current').classList.remove('current');
+    //被点击的这个对象，加上这个样式
+    this.classList.add('current');
+    //判断是不是点了全部，如果是全部直接render(herArr)
+    if (this.dataset.type == 0) {
+      render(heroArr);
+    }else{
+    //获取type
+    let arr = heroArr ;//初始化一个数组
+    //过滤数组的英雄
+    arr = arr.filter(hero =>hero.hero_type == this.dataset.type || hero.pay_type == this.dataset.ptype)
+    //过滤后，再渲染一次
+    render(arr)
+    }
+
+     })
+   });
+
+  </script>
+
+  
+</body>
+
+</html>
+```
+
-- 
Gitee

