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);
        })
    })
}

filter() 참고