Как удалить все классы, кроме тех, которые вы нажали?

Question

Эта функция начинается, когда я нажимаю на ссылку. Он должен удалить все «.is-active» классы для элементов с атрибутом [маршрут данных]. И добавьте класс '.is-active' в элемент [data-route], который связан с ссылкой, на которую я нажал.

toggle: function(section){ 
     var sections = document.querySelectorAll('[data-route]'); 
     for (i = 0; i < sections.length; i++){ 
      document.querySelector('[data-route]').classList.remove('is-active'); 
     } 
     document.querySelector(section).classList.add('is-active'); 
    } 

Но это не сработает. Он не удаляет классы?

См пример: http://jordypouw.github.io/myFED2/deeltoets1/index.html

P.S. это должно быть в ванильном JavaScript.

Answer 1

toggle: function(section){ 
    var sections = document.querySelectorAll('[data-route]'); 
    for (i = 0; i < sections.length; i++){ 

     sections[i].classList.remove('is-active'); 

     // querySelectorAll return an array of dom elements, u can access them directly. 

    } 

    // I suppose in your case that ' section ' variable is the clicked element so : 

    section.classList.add('is-active') 

    // if not you have to store the dom element from the event, and add the class here. 

} 

Answer 2

не должна быть так:

toggle: function(section){ 
    var sections = document.querySelectorAll('[data-route]'); 
    for (i = 0; i < sections.length; i++){ 
     document.querySelector('[data-route]').removeClass('is-active'); 
    } 
    document.querySelector(section).addClass('is-active'); 
} 

Edit: К сожалению, я должен был сказать removeClass и addClass

Answer 3

вы можете сделать это:

for (var item of document.querySelectorAll('[data-route]')) { 
    item.classList.remove('is-active'); 
} 

Это ecmascript6, поэтому он не будет работать на старых браузерах. Мне нравится, потому что это чисто и приятно. чтобы заставить его работать с другими браузерами, вы должны convert набор узлов в реальный массив, чтобы вы могли его закодировать.

Answer 4

Настройка переменной для щелкнули пункта ..

jQuery('.clicker-item').on("click", function(){ 

var clicked = jQuery('.clicker-item').not(jQuery(this)); 

clicked.removeClass("active") 
jQuery(this).toggleClass("active") 


});