Script Sample/Search Effect
searchEffect05 - filter()
근혁
2022. 2. 10. 17:56
{
//css 목록 보여주기
function updataList(list) { //함수로 묶어줌
listHTML = ""; //+눌렀을때 리스트추가 안되게 작업
for(const data of list){ //cssProperty를 for문을 이용해 계속 반복
listHTML += `<li>${data.name} : ${data.desc} <span>${data.view}</span>`; //listHtml로 화면에 cssProperty를 보이게 함
}
cssList.innerHTML = listHTML;
}
updataList(cssProperty) //함수 호출
//버튼 클릭하기
searchBox.forEach(span => { //searchBox 버튼을 클릭했을때
span.addEventListener("click", ()=>{
const target = span.dataset.view; //dataet의 view값을 가져온걸 target(타겟)에 저장
const filterList = cssProperty.filter(data => data.view >=target ) //filterList에 cssProperty에있는 taret보다 큰 view를 저장
updataList(filterList);
})
})
}