택택
109
2020-06-13 12:25:57
2
202

js초심자 이벤트리스너 질문입니다!


같은 클래스명을 가진 태그들에게 클릭하면 숨기고 보여지는 기능을 구현하고 싶습니다.

const toggle = document.querySelectorAll(".toggle");

toggle.forEach(function(e){
    addEventListener('click'handleToggle);
});

function handleToggle(event){

    if(event.target.innerHTML == 'SHOW'){
        event.target.innerHTML = 'HIDE';
        parentBox.classList.remove(SHOWING_CN);

    }
    else{
        event.target.innerHTML = 'SHOW';
        parentBox.classList.add(SHOWING_CN);
    
    }

}

그래서 위와 같이 코드를 구성했습니다. (html코드는 단순하게 클래스명만 같이 공유하고 있습니다)

근데 제 생각과 다르게 제가 쿼리셀렉터한  .toggle 말고도 선택할 수 있는 모든 것에 대해 이 이벤트가 설정돼있습니다.


같은 클래스명을 공유하는 대상에만 이벤트를 주고 싶으면 어떡해야 하나요?

0
  • 답변 2

  • yeori
    2k
    2020-06-13 14:04:02


    toggle.forEach(function(e){
        // 이벤트 타겟 지정
        e.addEventListener('click', handleToggle);
    });

    이렇게 해야할거같아요

  • 택택
    109
    2020-06-13 17:16:53

    https://okky.kr/user/info/29614https://okky.kr/user/info/29614yeori


    오오 해결됐어요!!


    감사합니다:)

  • 로그인을 하시면 답변을 등록할 수 있습니다.