JAVASCRIPT/자바스크립트
searchEffect01 - indexOf()
(*ᴗ͈ˬᴗ͈)ꕤ*.゚
2022. 2. 7. 16:25
<script>
const searchBox = document.querySelector("#search-box"); //searchBox를 선언 : 사용자가 적은 단어를 불러온다
const cssList = document.querySelectorAll(".list ul li"); //cssList 선언 : 리스트 목록을 불러온다
searchBox.addEventListener("keyup", () => { //saerchBox에서 무언가를 출력했을 때 이벤트를 추가한다
const searchWord = searchBox.value; //사용자가 입력한 데이터 저장소
//console.log(searchWord);
cssList.forEach(el => {
console.log(el.dataset.name)
const cssName = el.dataset.name; //cssName 선언 : 각각의 cssList에서의 data-name이다
if(cssName.indexOf(searchWord)){ //사용자가 적은 값과 cssName을 index로 비교한다
el.classList.add("hide"); //있으면 "hide"추가
} else {
el.classList.remove("hide"); //없으면 ""hide" 제거
}
})
})
</script>
선언한 것들 : searchBox / cssList / searchWord / cssName
1시간 30분 헤맸는데,
style에서 ul li.hide라 써야하는 것을 띄어쓰기를 해서 ul li .hide라 적어서 실행이 안됐다
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
링크 https://sungilryuu.github.io/webs_class/javascript/effect/searchEffect01.html