search Effect (3)

⭐️ 키워드 만들기 ⭐️

01. < script > 에 작성하기

        // 선택자
    const searchKeyword = document.querySelectorAll(".search__info .keyword span");   // 알파벳 키워드
    const searchList = document.querySelectorAll(".search__list ul li")  // 목록 리스트
    const searchInfo = document.querySelector(".search__info .num")   // 전체 갯수
    const searchInfo2 = document.querySelector(".search__info .num2"); // 찾은 갯수


    // 찾은 갯수 설정하기

    searchInfo.textContent = searchList.length;
    searchKeyword.forEach((el)=>{
    
        el.addEventListener("click", () => {
        
            const searchWord = el.innerText;           //사용자가 클릭한 알파벳
            // console.log(searchWord);
        
            searchList.forEach(el => {
                const cssName = el.querySelector("strong").innerText;       //CSS속성 텍스트
                // console.log(cssName);
            
                //알파벳 첫 글자 == css 속성의 첫 글자
                if(searchWord.charAt(0) === cssName.charAt(0)){
                    el.classList.remove("hide"); // 일치하면 숨김 없애고
                } else {
                    el.classList.add("hide"); // 불일치하면 숨김
                }
            });
        
            const hidingNum = document.querySelectorAll(".search__list ul li.hide");
            searchInfo2.textContent = searchList.length - hidingNum.length;
        });
    });

03. 결과보기

☛ 원본 소스 보기