js filter筛选商品

1、把所有数据通过forEach方法遍历数据渲染页面

2、把所有筛选a标签的点击事件委托给class类名的父元素

3、需要判断当点到a的时候触发该点击事件 

4、通过classList.remove删除active类名，通过classList.add给目标元素添加类名

5、通过我们设置的data-i自定义属性来区分用户点到的是哪个区间

6、利用数组方法filter来过滤区间数据

7、全部商品则显示所有数据

代码如下：

<style>

        .list{

           width:800px;

           margin:30px auto;

           display:flex;

           flex-wrap: wrap;

           justify-content: space-around;

        }

        .item img{

            width:200px;

            height:200px;

        }

        .item{

            text-align: center;

        }

        .nav{

            text-align: center;

        }

        .nav a{

            display: inline-block;

            width:100px;

            height:41px;

            border:1px solid #000;

            line-height:41px;

            margin-left:30px;

        }

        .active{

            background:yellowgreen;

            color: #fff;

        }

    </style>

<div class="nav">

        <a data-i="1" >0-100</a>

        <a data-i="2">100-300</a>

        <a data-i="3">400</a>

        <a class="active">全部商品</a>

    </div>
<div class="list"></div>

  <script>

//创一个数据

    const goddList=[

        {"id":"4001172",name:"鱼松寿司樱花","price":"100.88","img":"https://gw.alicdn.com/imgextra/i4/1696169910/O1CN01D4xnzZ2N4pnnRbVrh_!!1696169910.jpg"},

        {"id":"4001594",name:"自然派鳕鱼片","price":"200.90","img":"https://gw.alicdn.com/imgextra/i2/1667855994/O1CN01fI26591u9IjzZSgwC_!!1667855994.jpg"},

        {"id":"4001009",name:"毛家食品贡菜脆椒","price":"100.80","img":"https://gw.alicdn.com/imgextra/i3/1743813220/O1CN01EMoO4x1Zeo9UoBgqM_!!1743813220.jpg"},

        {"id":"4001874",name:"创意笔筒实木美式","price":"100.00","img":"https://gw.alicdn.com/imgextra/i1/1684785509/O1CN01unKSoi1qZAXIeEmE5_!!1684785509.jpg"},

        {"id":"4001649",name:"麻爪爪鸡爪香辣","price":"289.00","img":"https://gw.alicdn.com/imgextra/i4/3423263629/O1CN01INocEh1cg7u3gAz74_!!3423263629.jpg"},

        {"id":"3997185",name:"喜酒空酒玻璃结","price":"400.00","img":"https://gw.alicdn.com/imgextra/i1/558893349/O1CN01cudDvh1abtHd2rIAC_!!558893349.jpg"},

        {"id":"3997403",name:"【官方直营】马天尼","price":"300.00","img":"https://gw.alicdn.com/imgextra/i3/2206599271865/O1CN01PCSra41PeDE4AqTY6_!!2206599271865.png"},

        {"id":"399824",name:"王麻子砍骨头专用","price":"289.00","img":"https://gw.alicdn.com/imgextra/i1/2206509973635/O1CN0172Sbl61cisSfmqIOd_!!2206509973635.jpg"},

    ];

//封装一个渲染页面的方法

   function render(arr){

    let  str=''

    arr.forEach(item=>{

          const {id,name,price,img}=item;

          str+=`<div class="item">

            <img src=${img}>

              <h5>${name}</h5>

               <P>${price}</p>  

            </div>

          `

    })

    document.querySelector('.list').innerHTML=str

   }

//调用

   render(goddList);

//获取元素 并且把事件委托给它

   const nav=document.querySelector('.nav');

   nav.addEventListener('click',e=>{

    const {tagName,dataset}=e.target;

    if(tagName==='A'){

        let arr=goddList;

        document.querySelector('.active').classList.remove('active');

        e.target.classList.add('active')

//通过自定义属性知道你点击的区间

        if(dataset.i==='1'){

//filter 过滤数据

             arr= goddList.filter(el=>{

                 return el.price>0 && el.price<=100

             })

        } else if(dataset.i==='2'){

             arr= goddList.filter(el=>{

                 return el.price>=100 && el.price<=300

             })

        }else if(dataset.i==='3'){

             arr= goddList.filter(el=>{

                 return el.price>=300

             })

        }

//渲染全部数据

        render(arr)

    }

   })

    </script>