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

Question

[Denis0313]

let element = document.querySelector('.advantages__item');

window.addEventListener('scroll',check, false);

function check () {
  if (window.scrollY > 300) {
    element.classList.add('show')
  }else{
    element.classList.remove('show')
  }
}

В таком исполнении код работает и присваивает класс, кому надо и когда надо. Но как только я меняю querySelector НА querySelectorAll (таких элементов 5 штук, всем надо добавить класс), всё, вылетает ошибка (Cannot read properties of undefined (reading 'remove').

Answer 1

[Семён Окулов]

Для понимания проблемы достаточно вывести element в консоль при querySelectorAll и понять, что это массив. Тогда для присвоения доп. класса надо пройти по этому массиву и добавить этот самый класс.

let elements = document.querySelectorAll('.advantages__item');

window.addEventListener('scroll', check, false);

function check() {
  if (window.scrollY > 300) {
    elements.forEach(function(element) {
      element.classList.add('show');
    });
  } else {
    elements.forEach(function(element) {
      element.classList.remove('show');
    });
  }
}

console.log() сила!

Comments

[Denis0313]

Спасибо тебе огромное! Я ещё не волшебник, только учусь :)

[Семён Окулов]

Denis0313, если помогло, то отметь как решение. Рад помочь

[Stalker_RED]

let elements = document.querySelectorAll('.advantages__item');

window.addEventListener('scroll', check, false);

function check() {
    elements.forEach(el =>
      el.classList.toggle('show', window.scrollY > 300)
    );
}

Answer 2

[Stalker_RED]

Код можно немного Семён Окулов, сократить, использовав classList.toggle() вместо add и remove.

let elements = document.querySelectorAll('.advantages__item');

window.addEventListener('scroll', check, false);

function check() {
    elements.forEach(el =>
      el.classList.toggle('show', window.scrollY > 300)
    );
}

А теперь добавьте все-таки console.log и посмотрте сколько раз вызывается эта функция при скролле, и вы каждый раз дергаете у этих элементов classList. Возможно стоит запоминать предыдущее состояние, и перебирать элементы только если оно изменилось.
И, возможно, стоит добавить throttle.

Comments

[Семён Окулов]

это, конечно, хорошо, но я не стал сильно изменять код новичка, чтобы не создавать ему лишних проблем. В его случае эти изменения ничего существенного не дадут

[Семён Окулов]

const elements = document.querySelectorAll('.advantages__item');

window.addEventListener('scroll', () => elements.forEach(el => el.classList.toggle('show', window.scrollY > 300)));