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

Эта функция запускается, когда я нажимаю на ссылку. Необходимо удалить все классы '.is-active' в элементах с атрибутом [data-route]. И добавьте класс '.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.


javascript class addclass removeclass toggleclass
person Jordy    schedule 23.09.2014    source источник
comment
вы должны зацикливать все _1 _..., которые вам нужно сохранить в переменной, и зацикливать их. Также вы должны использовать querySelectorAll   -  person vsync    schedule 23.09.2014

Ответы (5)


arrow_upward
1
arrow_downward

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

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

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

person vsync    schedule 23.09.2014
comment
О да. Думаю, этот парень прав. Забыл, что там использовалась петля. - person DJ Burb; 23.09.2014
comment
Круто, это короткая версия Самсы его решение? - person Jordy; 24.09.2014
comment
да, его ответ - самый простой способ сделать это, но не самый крутой :) - person vsync; 24.09.2014

arrow_upward
0
arrow_downward

Задайте переменную для элемента, по которому был сделан щелчок.

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

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

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


});
person Tony Porto    schedule 19.02.2016

arrow_upward
0
arrow_downward

Я чувствовал, что другие ответы были недостаточно точными.

toggle: (s) => {

    // Find all other sections and remove the active class:
    document.body.querySelectorAll('[data-route]').forEach(i => i.classList.remove('is-active'))
    
    // Add active to the inputted section:
    s.classList.add('is-active')
}
person Kalle H. Väravas    schedule 28.12.2020

arrow_upward
-2
arrow_downward

не должно быть этого:

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');
}

Изменить: извините, я должен был сказать removeClass и addClass

person DJ Burb    schedule 23.09.2014
comment
ваш ответ не имеет смысла, вы зацикливаете sections, но ничего не делаете с ним внутри цикла. - person vsync; 23.09.2014
comment
да, смотрите мой ответ под вашим ответом. Я упустил из виду, что он делал петлю - person DJ Burb; 24.09.2014
comment
так что вы можете отредактировать свой ответ или удалить его ... потому что нет смысла оставлять ответ, который не работает. - person vsync; 24.09.2014

arrow_upward

arrow_downward

person    schedule
comment
Разве мы не можем сделать это без цикла? как и в JQuery, мы это делаем. - person Tahir Afridi; 04.12.2019
comment
@TahirAfridi document.body.querySelectorAll('[data-route]').forEach(i => i.classList.remove('is-active')) Вам все еще нужен цикл, но он более аккуратный - person Kalle H. Väravas; 28.12.2020