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

Question

Cal_Lightman @Cal_Lightman

JavaScript

Есть ли способ сократить запись скрипта 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');
	});

Вопрос задан более трёх лет назад
122 просмотра

6 комментариев

Подписаться 1 Средний 6 комментариев

Вадим @MrDecoy Куратор тега JavaScript

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

Написано более трёх лет назад

alexalexes @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 для клика.

Написано более трёх лет назад

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

document.querySelectorAll( '.cross, .cart_popup, .popup, .cart_overlay, progress' ) .forEach( el => el.classList.toggle( 'active' ) )
Написано более трёх лет назад

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

Написано более трёх лет назад

Сергей Сергей @hahenty

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

Написано более трёх лет назад
edward_freedom @edward_freedom

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

Написано более трёх лет назад

1) Чтобы знать как сократить скрипт, который на 100% состоит из работы с DOM, было бы не плохо предоставлять ещё и саму вёрстку, с которой этот скрипт работает.
2) Делать поиск элементов на каждый клик - это трагедия. Поиск элементов в DOM одна из самых дорогих операций.
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' ) )
Сергей Сергей, понял. Но в 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. Нужно гуглить теперь, как в нём обходить эти глюки.

Answer 1 · 2021-08-23 14:39:12

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

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

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

Войдите на сайт