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

Question

[0xDoley]

При уменьшении экрана блоки складываются в слайдер, чтобы слайдер работал, ему надо добавить класс "mySlides".
Есть js код, который скрывает/показывает по одному блоку, если добавить mySlides в классы блока

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  
  if (n > slides.length) {
	slideIndex = 1
  }
  if (n < 1) {
	slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[slideIndex-1].style.display = "block";
}

Идея в том, чтобы при размере width экрана <= 768, добавлялся класс mySlides, а при размере width экрана >= 768 убирался

Comments

[Шохрух Шаймардонов]

А не проще прописать стили в mySlides через media, чтобы работали только если ширина меньше 768пикселей?

[0xDoley]

Шохрух Шаймардонов, все медиа прописаны к другому блоку, скрипт подключается к блоку со стилем mySlides, добавляет атрибут display: block текущему блоку (слайду), display: disable к остальным и кнопками переключает атрибут между ними по очереди.

Answer 1

[Александр]

window.addEventListener('resize', function () {
	if (window.innerWidth <= 768) {
		// 0...768
		element.classList.add('class-name');
	} else {
		// 769...Inf
		element.classList.remove('class-name');
	}
});

Comments

[0xDoley]

Подходит, но только для первого блока. Остальные остаются без класса

[Александр]

Для массива, считаю, лучше debounce вариант.

const debounce = (callback, delay) => {
  let timeout = null;

  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(callback, delay, ...args);
  };
};

const elements = document.querySelectorAll('your-selector');
const debouncedResize = debounce(
  () => {
    if (window.innerWidth <= 768) {
      // 0...768
      for (let element of elements) {
        element.classList.add('class-name');
      }
    } else {
      // 769...Inf
      for (let element of elements) {
        element.classList.remove('class-name');
      }
    }
  },
  50
);

window.addEventListener('resize', debouncedResize);

Answer 2

[Сергей delphinpro]

https://developer.mozilla.org/ru/docs/Web/API/Wind...