토글+한가지만 선택되는 버튼

iikasam·2022년 6월 20일
0
// preview 버튼 클릭 시 example박스에 active 클래스가 붙으면서 활성화
// 활성화된 버튼을 다시 누르면 토글효과
// 비활성화된 버튼을 누르면 기존에 활성화되어있던 영역이 닫히도록!
let previewImg = document.querySelectorAll(".preview_btn");
previewImg.forEach(child => {
    child.addEventListener('click',function(event){
        console.log(event.target)
        let previewExAll = document.querySelectorAll('.example');
        let previewExChange = this.closest(".item").querySelector(".example").classList;
        if (previewExChange.contains('active')) {
            previewExChange.remove('active');
            this.classList.remove('btn_click');
        } else {
            previewExAll.forEach(active => {
                active.classList.remove('active');
            });
            previewImg.forEach(active2 => {
                active2.classList.remove('btn_click')
            })
            previewExChange.add('active');
            this.classList.add('btn_click');
        }
    });
})
profile
묵묵히, 꾸준히,

0개의 댓글