버튼을 클릭 할 때마다 버튼의 style과 상세설명이 바뀌어야한다.
각각 버튼에 이벤트리스너를 달아 코딩하면 아래와 같다.
const btnAll = document.querySelectorAll('.tab-button');
const boxAll = document.querySelectorAll('.tab-content');
btnAll[0].addEventListener('click', function () {
btnAll[0].classList.remove('orange');
btnAll[1].classList.remove('orange');
btnAll[2].classList.remove('orange');
btnAll[0].classList.add('orange');
boxAll[0].classList.remove('show');
boxAll[1].classList.remove('show');
boxAll[2].classList.remove('show');
boxAll[0].classList.add('show');
});
btnAll[1].addEventListener('click', function () {
btnAll[0].classList.remove('orange');
btnAll[1].classList.remove('orange');
btnAll[2].classList.remove('orange');
btnAll[1].classList.add('orange');
boxAll[0].classList.remove('show');
boxAll[1].classList.remove('show');
boxAll[2].classList.remove('show');
boxAll[1].classList.add('show');
});
btnAll[2].addEventListener('click', function () {
btnAll[0].classList.remove('orange');
btnAll[1].classList.remove('orange');
btnAll[2].classList.remove('orange');
btnAll[2].classList.add('orange');
boxAll[0].classList.remove('show');
boxAll[1].classList.remove('show');
boxAll[2].classList.remove('show');
boxAll[2].classList.add('show');
});
하지만 자세히 보면 버튼의 숫자만 바뀔 뿐 다른건 똑같기 때문에, 이는 for문을 사용해서 코드를 획기적으로 줄일 수 있다.
for (let i = 0; i < 3; i++) {
btnAll[i].addEventListener('click', function () {
btnAll[0].classList.remove('orange');
btnAll[1].classList.remove('orange');
btnAll[2].classList.remove('orange');
btnAll[i].classList.add('orange');
boxAll[0].classList.remove('show');
boxAll[1].classList.remove('show');
boxAll[2].classList.remove('show');
boxAll[i].classList.add('show');
});
}
0부터 3 전까지, 즉 총 3번을 반복실행하면서 i에 0,1,2를 넣어주고 있다.
여기서 나중에 탭의 갯수가 더 추가되어도 잘 동작하는 코드로 만들려면 어떻게 해야할까?
이는 i < 3으로 '3 미만까지 반복해주세요' 라고 하드코딩했던것을 'tab-content라는 클래스를 가진 요소의 갯수만큼 반복해주세요' 라고 바꾸면 된다.
for (let i = 0; i < btnAll.length; i++) {
btnAll[i].addEventListener('click', function () {
btnAll[0].classList.remove('orange');
btnAll[1].classList.remove('orange');
btnAll[2].classList.remove('orange');
btnAll[i].classList.add('orange');
boxAll[0].classList.remove('show');
boxAll[1].classList.remove('show');
boxAll[2].classList.remove('show');
boxAll[i].classList.add('show');
});
}
아래와 같이 함수로 만들어 더 보기좋게 만들어볼 수도 있다.
for (let i = 0; i < btnAll.length; i++) {
btnAll[i].addEventListener('click', function () {
openTap(i);
});
}
function openTap(a) {
btnAll[0].classList.remove('orange');
btnAll[1].classList.remove('orange');
btnAll[2].classList.remove('orange');
btnAll[a].classList.add('orange');
boxAll[0].classList.remove('show');
boxAll[1].classList.remove('show');
boxAll[2].classList.remove('show');
boxAll[a].classList.add('show');
}
정말 마지막으로!!!
코드 길이는 줄었지만 결국 성능적으로 봤을 때 이벤트리스너를 n번 실행한다는것은 변함없다.
이때는 부모요소에 이벤트를 한번만 주고 if문을 넣어서 이벤트를 단 한번만 넣고 모든 탭을 열 수 있다!
function openTap(a) {
btnAll[0].classList.remove('orange');
btnAll[1].classList.remove('orange');
btnAll[2].classList.remove('orange');
btnAll[a].classList.add('orange');
boxAll[0].classList.remove('show');
boxAll[1].classList.remove('show');
boxAll[2].classList.remove('show');
boxAll[a].classList.add('show');
}
list.addEventListener('click', function (e) {
if (e.target == btnAll[0]) {
openTap(0);
}
if (e.target == btnAll[1]) {
openTap(1);
}
if (e.target == btnAll[2]) {
openTap(2);
}
});
'Front-End Developer > JavaScript' 카테고리의 다른 글
JavaScript sort() not working | sort()가 안될 때 (0) | 2022.06.01 |
---|---|
JS로 생성한 요소 for문으로 HTML에 붙여주기 (0) | 2022.05.31 |
(JS기초)변수의 할당, 선언, 범위 (0) | 2022.05.22 |
event listener사용해서 로그인창 구현해보기 (1) | 2022.05.19 |
누구나 애니메이션 만드는 공식 (0) | 2022.05.18 |