JavaScript : querySelectorAll & classList가 예상대로 작동하지 않습니다.

Question

다른 버튼을 선택하면 클래스 active이 켜지 며, active 클래스의 버튼이 다시 선택되면 버튼을 토글하는 버튼이 여러 개 있습니다 (예 : 클래스 삭제).

또한 console.log 일 때 this이 선택한 요소를 올바르게 반환합니다.

라인 this.classList.toggle('active');은 클래스를 추가하고 있지만 제거하지는 않습니다. 왜 그런가?

var controls = document.querySelectorAll('.controls > button'); 

    for (var i = 0; i < controls.length; i++) { 
     controls[i].addEventListener('click', btnClick, false); 
    } 

    function btnClick() { 
     [].forEach.call(controls, function(el) { 
      // Remmove active class from all buttons 
      el.classList.remove('active'); 
     }); 

     this.classList.toggle('active'); 
    } 

Answer 1

편집

는 귀하의 의견에 따르면, 당신은 버튼을 전환 할 수 있어야합니다. 이 동작을 사용하기위한 대답을 업데이트했습니다.

var controls = document.querySelectorAll('.controls > button'); 
 

 
// you can use forEach here too 
 
[].forEach.call(controls, el => { 
 
    el.addEventListener('click', btnClick, false) 
 
}) 
 

 
function btnClick() { 
 
    // use Array function for lexical this 
 
    [].forEach.call(controls, el => { 
 
    // except for the element clicked, remove active class 
 
    if (el !== this) el.classList.remove('active'); 
 
    }); 
 

 
    // toggle active on the clicked button 
 
    this.classList.toggle('active'); 
 
}

button { 
 
    border-width: 1px; 
 
    border-radius: 1rem; 
 
    outline: 0; 
 
} 
 

 
button.active { 
 
    background: dodgerblue; 
 
    color: white; 
 
}

<div class="controls"> 
 
    <button class="active">A</button> 
 
    <button>B</button> 
 
    <button>C</button> 
 
    <button>D</button> 
 
</div>

Answer 2

먼저 모든 요소에서 클래스를 제거합니다. 그런 다음 그 중 하나를 토글합니다. 방금 모든 항목에서 제거 했으므로 항상 다시 추가됩니다.

클래스를 제거 할 목록에서 선택한 것을 제외합니다.

function btnClick() { 

    var target = this; 

    [].forEach.call(controls, function(el) { 
     if (target !== el) { 
      el.classList.remove('active'); 
     } 
    }); 

    target.classList.toggle('active'); 
}