SearchEffect03- charAt( )

 

    const searchBox = document.querySelectorAll(".search span");   //알파벳 버튼들
    const cssList = document.querySelectorAll(".list ul li");  //속성 리스트
    const cssCount = document.querySelector(".count em");      //속성 갯수
    //1. 처음에 모든 데이터 보여주기 
    cssList.forEach((li, index) => {   //li(element), index(순서- 갯수)
    	li.classList.add("show");      //모든 li를 보여준다. 
    	cssCount.innerText = index +1; //인덱스는 0번째 부터 세므로 1를 더해준다.
    })
    //알파벳을 클릭하면 클릭한 데이터 값을 가져와야 한다.
    // *error : searchBox.addEventListener is not a function : searchBox가 다중 선택이라서 에러가 남. forEach를 써서 해결.
    searchBox.forEach(el=>{          //다중 선택 forEach 이용.
    	el.addEventListener("click", ()=> {  //클릭 이벤트 지정
    	const searchWord = el.innerText; // 알파벳 첫 글자

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

    //알파벳 첫 글자(a) == CSS 속성의 첫 글자(a), 유형 값이 일치하는 것도 출력
        if(searchWord.charAt(0) === cssName.charAt(0) || searchWord.charAt(0) === csstype.charAt(0) ){ //논리 연산자를 이용해서 조건문을 추가한다.
        el.classList.add("show") //일치하는 데이터에 show클래스 추가
        }  else {
        el.classList.remove("show"); // 그 이외의 데이터에 show클래스 삭제
        }                    
       	})
    	})
    })
  

charAt( )참고

자바스크립트

 

지정한 인덱스의 문자열을 추출하는 charAt() 메서드를 이용한 예제입니다. 속성들의 첫 번째 글자와 일치하는 리스트를 찾아서 클릭하면 해당 리스트의 설명을 띄워줍니다. 

 

A를 클릭하면 A로 시작하는 CSS 속성이 검색됩니다. 

그렇게 Z까지 가능합니다.