자바스크립트 클릭이벤트 제외

iikasam·2022년 5월 23일
0
post-thumbnail
// let previewImg = document.querySelectorAll(".preview");
//    previewImg.forEach(child => {
//        child.addEventListener('click',function(){
//            let previewImgEx = document.querySelectorAll('.example');
//            previewImgEx.forEach(active => {
//               active.classList.remove('active');
//            });
//            this.nextElementSibling.classList.add('active');
//        });
//    })

    let previewImg = document.querySelectorAll(".preview_btn");
    previewImg.forEach(child => {
        child.addEventListener('click',function(){
            let previewExAll = document.querySelectorAll('.example');
            let previewExChange = this.closest(".item").querySelector(".example").classList;
            if (previewExChange.contains('active')) {
                previewExChange.remove('active');
            } else {
                previewExAll.forEach(active => {
                    active.classList.remove('active');
                });
                previewExChange.add('active');
            }
        });
    })

    // test2.addEventListener('click',function() {
    //     alert('1');
    // });


    // previewImg.addEventListener('click',function(event){
    //     alert('1')
    //     // previewImg.forEach(child => {
    //     //     child.nextElementSibling.classList.remove('active');
    //     // })
    //     // this.nextElementSibling.classList.toggle('active');
    //     // return test = true;
    // });


    // for (const preview of previewImg) {
    //     preview.addEventListener('click',function(event){
    //         event.stopPropagation();
    //         console.log(preview.nextElementSibling)
    //         // 클릭한 애한테만 클래스주기
    //         this.nextElementSibling.classList.toggle('active');
    //         return test = true;
    //
    //     });
    //     preview.nextElementSibling.classList.remove('active');
    // }

    // document.addEventListener('click',function(e){
    //     for (let i = 0;i< previewImg.length;i++) {
    //         previewImg[i].nextElementSibling.classList.remove('active')
    //     }
    // })
profile
묵묵히, 꾸준히,

0개의 댓글