searchEffect03 - charAt()

<script>
    const searchBox = document.querySelectorAll(".search span"); //알파벳 버튼(다중)
    const cssList = document.querySelectorAll(".list ul li"); //속성 리스트
    const cssCount = document.querySelector(".count em"); //속성 갯수

    cssList.forEach((li, index) => { //처음에 시작할 때 모든 데이터 보이기
        li.classList.add("show"); //li 속성의 class에 show추가하기
        cssCount.innerHTML = index + 1; //cssCount에 전체 값을 적어주기
    })

    //1. 알파벳을 클릭하면 클릭한 데이터 값을 가져와야 함
    searchBox.forEach(el => { //el은 span!
        el.addEventListener("click", () => { //클릭할 때 이벤트 적용
            const searchWord = el.innerText; //알파벳 첫글자
            const searchType = el.innerText; //data-type

            cssList.forEach(el => {
                const cssName = el.dataset.name; //css 속성 값
                const cssType = el.dataset.type; //css 유형 값

                //알파벳 첫글자(a) == CSS 속성의 첫글자(a) || data-type도 비교
                if (searchWord.charAt(0) === cssName.charAt(0) || searchType === cssType) {
                    el.classList.add("show"); //첫글자와 같으면 show 추가
                } else {
                    el.classList.remove("show"); //첫글자와 다르면 show 제거
                }
            })
        })
    })
</script>

참고.

charAt() 함수는 문자열에서 특정 인덱스에 위치하는 단일문자를 반환합니다.

 

링크 https://sungilryuu.github.io/webs_class/javascript/effect/searchEffect03.html