searchEffect05 - filter()

 {
        const searchBox = document.querySelectorAll(".search span"); // 버튼들
        const cssList = document.querySelector(".list ul"); //속성 리스트
        const cssCount = document.querySelector(".count em"); //속성 갯수
        let listHTML = ""; //지역변수에서 전역변수로 변경

        // 목록 보여주기
        function updataList(list) {
            let listHTML = ""; //함수 실행시 목록 초기화
            for (const data of list) {
                listHTML += `${data.name} : ${data.desc} : ${data.view}`; //데이터 name, desc, view값을 listHTML에 출력
            }
            cssList.innerHTML = listHTML; //속성리스트에 listHTML 출력
        }
        updataList(cssProperty); // 함수 실행

        // 버튼 클릭하기
        searchBox.forEach(span => {
            span.addEventListener("click", () => {
                const target = span.dataset.view; //버튼 타겟 설정
                const filterList = cssProperty.filter(data => data.view >= target); //타겟 값 설정

                updataList(filterList); // 함수 실행
            })
        })
}

 

사이트 바로가기 : https://dnwls7738.github.io/webs_class/javascript/effect/searchEffect.html