Cal_Lightman
@Cal_Lightman

Есть ли способ сократить запись скрипта JS?

Здравствуйте. Можно ли как то сократить запись JS? И если да, то как она будет выглядеть?

Описание:
По клику на .burger_block - открытие меню. Оно выезжает т.е. включаются классы.
По клику на .cross (крестик) или .cart_overlay (фон) - отключение классов. Меню уезжает.

Это мой предел в знании скриптов, поэтому не ругайте.

document.querySelector('.burger_block').addEventListener('click', function(event) {
		document.querySelector('.header_feedback').style.zIndex = '82';
		document.querySelector('.cross').classList.add('active');
		document.querySelector('.cart_popup').classList.add('active');
		document.querySelector('.popup').classList.add('active');
		document.querySelector('.cart_overlay').classList.add('active');
		document.querySelector('progress').classList.add('active');
	});
	document.querySelector('.cross').addEventListener('click', function(event) {
		setTimeout(function(){ document.querySelector('.header_feedback').style.zIndex = '80'; }, 300);
		document.querySelector('.cross').classList.remove('active');
		document.querySelector('.cart_popup').classList.remove('active');
		document.querySelector('.popup').classList.remove('active');
		document.querySelector('.cart_overlay').classList.remove('active');
		document.querySelector('progress').classList.remove('active');
	});
	document.querySelector('.cart_overlay').addEventListener('click', function(event) {
		setTimeout(function(){ document.querySelector('.header_feedback').style.zIndex = '80'; }, 300);
		document.querySelector('.cross').classList.remove('active');
		document.querySelector('.cart_popup').classList.remove('active');
		document.querySelector('.popup').classList.remove('active');
		document.querySelector('.cart_overlay').classList.remove('active');
		document.querySelector('progress').classList.remove('active');
	});
  • Вопрос задан
  • 111 просмотров
Решения вопроса 1
WblCHA
@WblCHA
const menuSelectors = ['.cross', '.cart_popup', '.popup', '.cart_overlay', 'progress'];
  const toggleMenu = (show) => {
    menuSelectors.forEach((s) => document.querySelector(s).classList.toggle('active', show));
  }
  
  const showMenu = () => {
    document.querySelector('.header_feedback').style.zIndex = '82';
    toggleMenu(true);
  };
  
  const hideMenu = () => {
    setTimeout(() => document.querySelector('.header_feedback').style.zIndex = '80', 300);
    toggleMenu(false);
  };
  
  document.querySelector('.burger_block').addEventListener('click', showMenu);
  document.querySelector('.cross').addEventListener('click', hideMenu);
  document.querySelector('.cart_overlay').addEventListener('click', hideMenu);
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
const activateBurger = () => {
  document.querySelector('.header_feedback').style.zIndex = '82';
  ['.cross', '.cart_popup', '.popup', '.cart_overlay', 'progress'].forEach(
    (sel) => document.querySelector(sel).classList.add('active');
};

document.querySelector('.burger_block').addEventListener('click', activateBurger);

Аналогично для деактивации.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы