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

Question

[Cal_Lightman]

Здравствуйте. Можно ли как то сократить запись 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');
	});

Comments

[Вадим]

1) Чтобы знать как сократить скрипт, который на 100% состоит из работы с DOM, было бы не плохо предоставлять ещё и саму вёрстку, с которой этот скрипт работает.
2) Делать поиск элементов на каждый клик - это трагедия. Поиск элементов в DOM одна из самых дорогих операций.

[alexalexes]

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

Если повторяете написание кода второй раз, значит это просится сделать отдельной функцией. Вынесите это действие в отдельную функцию, и указывайте ее в addEventListener для клика.

[Сергей Сергей]

Делать поиск элементов на каждый *класс - это трагедия. Поиск элементов в DOM одна из самых дорогих операций.

document.querySelectorAll( '.cross, .cart_popup, .popup, .cart_overlay, progress' )
  .forEach( el => el.classList.toggle( 'active' ) )

[Cal_Lightman]

Сергей Сергей, понял. Но в IE11 не работает от слова совсем....

написал так:

document.querySelector('.burger_block').addEventListener('click', function(event) {
		document.querySelectorAll('.cross, .cart_popup, .popup, .cart_overlay, progress')
		.forEach( el => el.classList.add('active'))
	});
	document.querySelector('.cross').addEventListener('click', function(event) {
		document.querySelectorAll('.cross, .cart_popup, .popup, .cart_overlay, progress')
		.forEach( el => el.classList.remove('active'))
	});
	document.querySelector('.cart_overlay').addEventListener('click', function(event) {
		document.querySelectorAll('.cross, .cart_popup, .popup, .cart_overlay, progress')
		.forEach( el => el.classList.remove('active'))
	});

[Сергей Сергей]

На то он и IE11. Нужно гуглить теперь, как в нём обходить эти глюки.

[edward_freedom]

Cal_Lightman, от буквы полностью

Answer 1

[WbICHA]

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

Comments

[Cal_Lightman]

В Мозиле работает, а вот в ie11 выдает ошибку. Совсем отказывается в нем работать

[edward_freedom]

Cal_Lightman, в ie и не надо

[WbICHA]

Cal_Lightman, а если и нужен, то ты серьёзно ручками жс под нужную версию ие правишь? Ты про бабель вообще слышал?

Answer 2

[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);

Аналогично для деактивации.