728x90
반응형
탭메뉴 버튼 구현 (forEach 사용)
let itemList = document.querySelectorAll('li');
//querySelectorAll를 이용해 li를 전부 불러온다 (리스트형태로 itemList에 저장됨)
itemList.forEach(function(item){
item.addEventListener('click',function(){
itemList.forEach(function(e){
e.classList.remove('active');
});
item.classList.add('active');
});
});
리스트형태로 갖고 있기 때문에 forEach를 이용해 반복한다
이때 item 은 itemList 의 1개를 지정
즉
documetn.getElementsByTagName('li')[i]과 같은 의미로 i는 0번부터 마지막번째까지 반복한다
for문으로 바꾼다면 아래와 같다
var itemList = document.querySelectorAll('li');
for(let i =0; i < itemList.length; i++){
itemList[i].addEventListener('click',function(){
for(let j =0; j < itemList.length; j++){
itemList[j].classList.remove('active');
}
itemList[i].classList.add('active');
});
}
for문 사용
[javascript/javascript] - javascript 여러 엘리먼트에 한번에 이벤트리스너 등록하기
728x90
반응형
'javascript > javascript' 카테고리의 다른 글
시간 계산(몇분전, 몇일전, 몇년전..) (268) | 2022.09.05 |
---|---|
마우스 따라 움직이는 효과 (975) | 2022.09.01 |
select 플러그인 (421) | 2022.08.30 |
javascript select 선택된 옵션 값 가져오기 (277) | 2022.08.29 |
javascript 여러 엘리먼트에 한번에 이벤트리스너 등록하기 (418) | 2022.08.29 |
댓글