//渲染函数,封装,设置arr为形参
function render (arr) {
let str = ''
//foreach不遍历不返回值
arr.forEach(item => {
//解构出传回来的数据(文章没有表明)
const {name,price,picture} = item
str+=`
<div class="item">
<img src="${picture}" alt="">
<p class="name">${name}</p>
<p class="price">${price}</p>
</div>
`
})
document.querySelector('.list').innerHTML = str
}
//调用函数把实参传回形参
render(goodsList)
首先渲染的封装函数
其次再进行TAB栏的过滤筛选
//过滤筛选,直接简洁写法进行匿名函数的事件委托
document.querySelector('.filter').addEventListener('click', e=>{
//解构target,dataset=CSS内的data-index(目的熟悉写法)
const {tagName,dataset} = e.target
if(tagName === 'A'){
//如果填写let arr = []的话,点击a标签的第四个就会出现空白不渲染函数
let arr = goodsList
//CSS内标签为data-index(标识数)
if (dataset.index === '1') {
//进行filter过滤,用arr接受return的返回值
arr = goodsList.filter(item => item.price>0&&item.price<=100)
//用if叠加也可以执行,不过用else if可读性更高
} 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)
}
})