21_数组过滤
本题考点:onchange事件、过滤
根据题目要求,实现一个价格过滤选择框,当选择价格范围的时候,ul列表中的内容会根据选择的价格重新渲染,核心步骤有:
- 创建重渲染函数,每"select"节点的onchange事件触发时,会调用该函数重新渲染ul列表中的内容
- 给"select"节点添加onchange事件,每当事件触发,对"select"节点当前值进行判断,对"cups"数组进行重新排序并且调用重渲染函数
参考答案:
select.onchange = function(){
ul.innerHTML = ''
switch(parseInt(this.value)){
case 1 :
var newArr = cups.filter((item)=>{return item.sales < 100})
break
case 2:
var newArr = cups.filter((item)=>{return item.sales <= 500 && item.sales >= 100})
break
case 3:
var newArr = cups.filter((item)=>{return item.sales > 500})
break
}
listRendering(newArr)
}
function listRendering(arr) {
var str = ''
arr.forEach(element => {
str += `<li>${element.name}</li>`
})
ul.innerHTML = str
}