인프런 커뮤니티 질문&답변
작성한 질문수
클릭 이벤트 질문입니다.
해결된 질문
작성
·
182
0
안녕하세요, 선생님^^ 이번 강의에서 나온 기능을 활용해서 버튼을 누르면 버튼과 상자의 색이 바뀌는 기능을 만들어봤는데요. 버튼과 박스를 하나의 부모 요소에 포함시키지 않으니 currneItem 변수를 할당하는 것이 너무 어렵습니다ㅜㅜ
https://jsfiddle.net/yfrhv1u5/8/
위의 코드와 같이하면 currentItem에 btn이 box로 재할당 되어서 원하는 기능 구현이 되지 않고
https://jsfiddle.net/ywmpLdvc/5/
위의 코드와 같이 currentItems를 배열로 만들어서 값을 저장하면 원하는 기능이 구현은 되는데 active, inative 함수로 분리하는 방법을 모르겠습니다ㅜㅜㅜ
혼자 고민해봐도 모르겠어서 질문 드립니다.ㅜㅜ 답변 주시면 감사하겠습니다
답변 1
2
1분코딩
지식공유자
현재 활성화된 인덱스를 기준으로 세팅하시면, 구조가 복잡해져도 컨트롤 하기가 좋답니다.
아래와 같이 해보세요^^
const btnGroup = document.querySelector(".btn-group");
const btns = document.querySelectorAll(".btn");
const boxes = document.querySelectorAll(".box");
let currentIndex = 0;
//data-index 설정
for (let i = 0; i < btns.length; i++) {
btns[i].dataset.index = i;
boxes[i].dataset.index = i;
}
function activate(index) {
currentIndex = index;
btns[currentIndex].classList.add('clicked');
boxes[currentIndex].classList.add('clicked');
}
function inactivate() {
btns[currentIndex].classList.remove('clicked');
boxes[currentIndex].classList.remove('clicked');
}
const btnClickHandler = (e) => {
const targetElem = e.target;
const targetIdx = targetElem.dataset.index;
inactivate();
activate(targetIdx);
};
btnGroup.addEventListener("click", btnClickHandler);