• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

ajax란? 강의 내용 중 toggle

20.09.01 17:34 작성 조회수 89

1

classList.toggle이 안됩니다.

toggle('active', true)로 하면 like에 active가 붙어서 이미지가 잘 변하는데 toggle('active')는 안 되네요. 클릭해도 이미지가 변경되지 않아요.

- IDE : webstorm 

- Browser : 크롬 버전 85.0.4183.83(공식 빌드) (64비트)

function delegation(e) {
        //타겟 : 클릭한 대상을 가져오기 e.target, e = 이벤트 객체
        let elem = e.target;
        while(!elem.getAttribute('data-name')){
            elem = elem.parentNode;
            if(elem.nodeName === 'BODY'){
                elem = null;
                return;
            }
        }
        if(elem.matches('[data-name="like"]')) {
            elem.classList.toggle('active');
}
.contents .btn_container .like-btn.active span{
    background: url("../imgs/bg05.png")no-repeat 0 -422px;
}

이상입니다.

답변 1

답변을 작성해보세요.

1

안녕하세요 s2chuu님  kindtiger입니다 :)

먼저, 답변이 늦어진점 대단히 죄송합니다 ㅠㅠ..

자바스크립트의 classList.toggle은 2개의 인자를 받습니다. 

마지막 인자에 true or false를 받고, 적지않으면 암묵적으로 클래스가 들어가면 true 빠졌다면 false를 반환해 스위치처럼 토글이 가능한 형태입니다. 

toggle('active', true) 로 작성하셨다면 한번 넣었을때는 들어가나 그 다음 클릭에서는 빠지지 않을것으로 예상이 됩니다.

위 코드만을 보고 문제를 확인할 순 없으나, 

toggle('active')만 했는데, 작동이 안될 경우엔 자바스크립트 코드에 문제가 있을것으로 예상됩니다.

전체 코드를 깃헙으로 공유해주시면 확인 후 답변 드리도록 하겠습니다~