티스토리 뷰

indexOf

{
 const searchBox = document.querySelector("#search-box");    //search Box 변수에 저장
        const cssList = document.querySelectorAll(".list ul li");   //다수의 li를 변수에 저장
        const cssCount = document.querySelector(".count em");       //em을 변수에 저장

        cssList.forEach((element, index) => {       //cssList에 있는 모든 li태그에 show 클래스 추가
            element.classList.add("show");          
            console.log(index);
            cssCount.innerHTML = index + 1;     //cssCount의 em태그에 index +1 넣음
        })

      searchBox.addEventListener("keyup", ()=>{ 
          const searchWord = searchBox.value; //사용자가 입력한 값

        cssList.forEach(el => {
            const cssName = el.dataset.name;  //CSS 속성 모든 값

            if(cssName.includes(searchWord)){   //사용자가 입력한 값이 있을때 show 추가
                el.classList.add("show");
            }else {
                el.classList.remove("show");    //사용자가 입력한 값이 없을때 show 삭제
            }
        })
      });   

}

includes 참고

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

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