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

Question

[funkydance]

Здравствуйте.

Есть скрипт, где при клике на ссылку на неё навешивается класс hide. Мне нужно, чтобы перед этим у всех ссылок с этим классом удалялся этот класс hide.

Вот часть кода:

let tab = document.querySelectorAll('.page-services-item'),
        info = document.querySelector('.page-services-list'),
        tabContent = document.querySelectorAll('.services-list__wrap'),
        titleTab = document.querySelector('.page-services-title__wrap');

    info.addEventListener('click', function(event) {
        let target = event.target;
        if (target && target.classList.contains('page-services-item')) {
            for(let i = 0; i < tab.length; i++) {
                if (target == tab[i]) {
                    let content = tab[i].innerHTML;
                    titleTab.innerHTML = content;
                    tab[i].classList.add('hide'); ///Вот тут на определённую ссылку из массива я навешиваю класс
                    hideTabContent(0);
                    showTabContent(i);
                    break;
                }
            }
        }
    })

По идеи tab.classList.remove('hide'); должен удалить hide класс у всех ссылок, а уже потом tab[i].classList.add('hide'); навесит на определённую.

Но, увы tab.classList.remove('hide'); не срабатывает. Где ошибаюсь?

Answer 1

[Евгений]

let tab = document.querySelectorAll('.page-services-item'),
        info = document.querySelector('.page-services-list'),
        tabContent = document.querySelectorAll('.services-list__wrap'),
        titleTab = document.querySelector('.page-services-title__wrap');

    info.addEventListener('click', function(event) {
        let target = event.target;
        if (target && target.classList.contains('page-services-item')) {
            for(let i = 0; i < tab.length; i++) {
                if (target == tab[i]) {
                    let content = tab[i].innerHTML;
                    titleTab.innerHTML = content;
                    tab[i].classList.add('hide'); ///Вот тут на определённую ссылку из массива я навешиваю класс
                    hideTabContent(0);
                    showTabContent(i);
                } else {
                     tab[i].classList.remove('hide');
                 }
            }
        }
    })

Answer 2

[funkydance]

Спасибо, понял причину решил её так:

info.addEventListener('click', function(event) {
        let target = event.target;
        if (target && target.classList.contains('page-services-item')) {
            for(let i = 0; i < tab.length; i++) {
                if (target == tab[i]) {
                    let content = tab[i].innerHTML;
                    titleTab.innerHTML = content;
                    for (let i = 0; i < tab.length; i++) {
                        tab[i].classList.remove('hide');
                    }
                    tab[i].classList.add('hide');
                    hideTabContent(0);
                    showTabContent(i);
                    break;
                }
            }
        }
    })

Добавил

for (let i = 0; i < tab.length; i++) {
     tab[i].classList.remove('hide');
}

Натолкнул на это ответ из топика - Как добавить класс сразу всем элементам?

Comments

[Евгений]

2 раза один и тот же цикл?) Зачем?!

[funkydance]

Евгений, Да, спасибо. Я только утром на свежую голову осознал, что выше уже цикл этот есть и ваш вариант самый верный))) Использую ваш вариант в итоге))

[Евгений]

funkydance, на свежую голово всегда лучше думается)