티스토리 뷰

{
	 //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() 참고

'Script Sample > Search Effect' 카테고리의 다른 글

searchEffect06 - sort()  (0) 2022.02.15
searchEffect04 - find()  (0) 2022.02.08
searchEffect03 - charAt()  (0) 2022.02.08
searchEffect02- includes( )  (0) 2022.02.07
searchEffect01- indexOf( )  (0) 2022.02.07
댓글
© 2018 webstoryboy