HTML+CSS+JavaScript:两种方法实现商品价格筛选效果

一、需求

鼠标点击上方菜单栏中不同的价格区间,自动筛选出价格符合条件的商品,并渲染在页面中

HTML+CSS+JavaScript:两种方法实现商品价格筛选效果_第1张图片

 

二、代码素材

以下是缺失JS部分的代码,感兴趣的小伙伴可以先自己试着写一写





  
  
  
  商品渲染
  



  
  

三、算法思路

1、封装渲染函数,传入的参数为数组对象,将数组中的每一个对象进行数据处理,再渲染到页面中

2、利用事件委托为上方tab栏注册点击事件,利用事件对象判断鼠标点击的是哪个价格区间,再在数组中筛选出价格在该区间内的商品,并返回一个新的数组对象

3、将新的数组对象作为参数传入渲染函数并调用

四、法一:数组map方法和数组join方法

完整代码





  
  
  
  商品渲染
  



  
  

五、法二:数组forEach方法

完整代码





  
  
  
  商品渲染
  



  
  

你可能感兴趣的:(html,css,javascript)