Javascript - removeClass к элементам, которые имеют его

Question

Ищем чистый яваскрипт для замены этого Jquery кода:

$().evt(function(){ 
    $('.class').removeClass('active'); 
    $(this).addClass('active'); 
}) 

это, как я пытаюсь

node.addEventListener('contextmenu', function(e){ 
      e.preventDefault(); 
      var currentActive = document.querySelectorAll('.active'); 
      alert(currentActive.length); 
      currentActive.className = ''; 
      this.className = 'active'; 
     }); 

скрипка: http://jsfiddle.net/toniweb/Wx8Jf/34/

Но текущий активный класс не удален

Answer 1

Попробуйте следующее:

node.addEventListener('contextmenu', function(e){ 
      e.preventDefault(); 
      var currentActive = document.querySelectorAll('.active'); 
      for (var i = 0; i < currentActive.length; i++) { 
       currentActive[i].classList.remove('active'); 
      } 
      this.className += ' active'; 
     }); 

Это удалит из этих узлов только класс active.

Answer 2

Вам понадобится для доступа правильного узла, как document.querySelectorAll возвращает NodeList

Попробуйте это,

node.addEventListener('contextmenu', function(e){ 
     e.preventDefault(); 
     var currentActive = document.querySelectorAll('.active'); 
     if(currentActive[0]) { // first item with class 'active' 
      currentActive[0].className = ''; 
     } 
     this.className = 'active'; 
    }); 

Обновлено скрипка: http://jsfiddle.net/Wx8Jf/35/

Answer 3

Попробуйте удалить любой класс из списка конкретного элемента:

var removeClassName = 'active'; 
var classes = element.className.match(/\S+/g); 
var ind = classes.indexOf(removeClassName); 
if (ind >= 0) 
    classes.splice(index, 1); 
element.className = classes.join(' '); 

Answer 4

Попробуйте это:

var node = mainNodes[i]; 
node.addEventListener('contextmenu', function(e){ 
    e.preventDefault(); 
    var currentActive = document.querySelectorAll('.active'); 

    for (element in currentActive) { 
     element.className = element.className.replace(' active', ''); 
    } 

    e.target.className += ' active'; 

В контексте обработчика событий, это будет ссылка на анонимную функцию. Вместо этого используйте e.target.

Этот код удалит класс .active для всех его элементов и добавит этот класс в цель события. Другие ответы работают только на первый элемент с этим классом, это то, что вы хотите?

Обновлено скрипку:. http://jsfiddle.net/Wx8Jf/36/