티스토리 뷰
const searchBox = document.querySelector("#search-box"); //search-box 변수에 저장
const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수에 저장
const cssCount = document.querySelector(".count em"); //전체 li갯수를 표시
cssList.forEach((element, index) => {
element.classList.add("show");
cssCount.innerHTML = index + 1;
});
searchBox.addEventListener("keyup", () => { //input을 클릭했을 때 이벤트 설정
const searchWord = searchBox.value; //사용자가 입력한 데이터 저장소 변수에 저장
// console.log(searchWord)
cssList.forEach(el => { //다수의 li한테 적용
const cssName = el.dataset.name; //CSS 속성 값(속성 모든 값)을 변수에 저장
// console.log(cssName)
if(cssName.includes(searchWord)){ //사용자가 입력한 값의 데이터가 있는지 확인
el.classList.add("show"); //데이터가 있으면 클래스 add를 추가
} else {
el.classList.remove("show"); //데이터가 없으면 클래스 add를 삭제
}
})
})
'Script Sample > Search Effect' 카테고리의 다른 글
indexOf (0) | 2022.02.07 |
---|
댓글
© 2018 webstoryboy