티스토리 뷰
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 삭제
}
})
});
}
'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