HTML+CSS+JS(产品列表渲染、价格筛选)

---

前言

小案例展示主要包括了“商品页面的数据渲染”、根据不同价格区间，我们可以筛选我们想要的价格下商品。
适合前端小白练手
掌握前端相关的基础语法，Html+Css+Js

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、前端页面渲染(展示)

二、页面功能分析

1、头部四个区间选择样式：通过css来写的，用的是a标签，给a标签增加了一个focus伪类选择器，当a标签聚焦的时候添加对应的样式即可。

css代码如下：

 .price_area li a:focus{
			background-color: green;
			color: white;
		}

2、中间身体部分的数据通过JS渲染的：
通过遍历可以遍历存储的数据，定义一个字符串我们将每次遍历的数据进行累加拼接存储，最后绑定到我们的父元素，父元素.innerHTML=s，这里的s即 遍历累加拼接的内容。

js代码如下：

function render(arr){
				let s="";
				arr.forEach(item=>{
				let {id,name,url}=item;
					s+=`
				<li><img src="${url}"><span>${name}</span>
				<spn>价格：${id}元</span></li>`;
				})
document.querySelector(".product_area").innerHTML=s;}

3、价格区间筛选如何实现的？

利用数组的filter()函数进行过滤筛选，将满足的数据再次存储
最后通过我们定义的渲染函数渲染出来就完成了 我们小案例的效果了。

js代码如下：

document.querySelector(".price_area").addEventListener("click",e=>{
					let {tagName,dataset}=e.target;
					let arr=goodList;
					if(tagName==="A"){
						let {id}=dataset;
						if(id==1){
							arr=goodList.filter(item=>item.id>0&&item.id<=2000);
						}else if(id==2){
							arr=goodList.filter(item=>item.id>2000&&item.id<=4000);
						}else if(id==3){
							arr=goodList.filter(item=>item.id>4000);
						}						
					}
					render(arr);
				})

将模拟的后台数据赋值给新声明的变量goodList，通过事件委托绑定事件，通过if判断选择了哪个区间的价格，这里有四个区间，但其中只要对其中3个进行判断即可，因为全部区间的选择不在if的判断语句中。

这里给对应价格区间元素 自定了id属性，通过id来辨识对应的价格区间。 if判断语句中，利用了数组中filter()函数进行过滤，满足条件的，最后filter()函数会返回一个新的数组，这个新数组即我们筛选过滤后的数据了。

三、补充

js代码中部分用到了Es6中的新语法，对象的解构赋值、箭头函数，这里不一一解释了，欢迎交流。

四、总结

需要源码的评论！欢迎交流！

--------------------------------------------作者：代码小白鸽