Как уменьшить этот скрипт?

Question

artem @arteqrt

Почти не начинающий програмист

JavaScript

Как уменьшить этот скрипт?

Здравствуйте, я новичок в js и только осваиваю его, создал простой скрипт с кучей костылей наверное)
посмотрите :

window.onload = function() {

document.querySelector('#category-genre').addEventListener('click', () => {
	document.querySelector('#subcategory-block-genre').classList.toggle('active');
	document.querySelector('#menu-figure-genre').classList.toggle('activeForMenuFigure');
})

document.querySelector('#category-type').addEventListener('click', () => {
	document.querySelector('#subcategory-block-type').classList.toggle('active');
	document.querySelector('#menu-figure-type').classList.toggle('activeForMenuFigure');
})

document.querySelector('#category-long').addEventListener('click', () => {
	document.querySelector('#subcategory-block-long').classList.toggle('active');
	document.querySelector('#menu-figure-long').classList.toggle('activeForMenuFigure');
})

document.querySelector('#category-country').addEventListener('click', () => {
	document.querySelector('#subcategory-block-country').classList.toggle('active');
	document.querySelector('#menu-figure-country').classList.toggle('activeForMenuFigure');
})

document.querySelector('#category-awards').addEventListener('click', () => {
	document.querySelector('#subcategory-block-awards').classList.toggle('active');
	document.querySelector('#menu-figure-awards').classList.toggle('activeForMenuFigure');
})

document.querySelector('#category-result').addEventListener('click', () => {
	document.querySelector('#subcategory-block-result').classList.toggle('active');
	document.querySelector('#menu-figure-result').classList.toggle('activeForMenuFigure');
})

document.querySelector('#category-actor').addEventListener('click', () => {
	document.querySelector('#subcategory-block-actor').classList.toggle('active');
	document.querySelector('#menu-figure-actor').classList.toggle('activeForMenuFigure');
})

}

суть я думаю вы поняли) я беру блок и присваиваю ему класс при нажатии, при последующем нажатии его отбираю.
Так вот, проблема в том, что этих блоков у меня 7, все они с одинаковым классом, но я не могу отслеживать елемент и применять класс именно к нему(не получается), как уменьшить скрипт?

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

1 комментарий

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

Ярослав Иванов @space2pacman

let types = ["genre", "type", "long", "country", "awards", "result", "actor"];

types.forEach(type => {
  document.querySelector(`#category-${type}`).addEventListener('click', () => {
    document.querySelector(`#subcategory-block-${type}`).classList.toggle('active');
    document.querySelector(`#menu-figure-${type}`).classList.toggle('activeForMenuFigure');
  })
})

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

let types = ["genre", "type", "long", "country", "awards", "result", "actor"]; types.forEach(type => { document.querySelector(`#category-${type}`).addEventListener('click', () => { document.querySelector(`#subcategory-block-${type}`).classList.toggle('active'); document.querySelector(`#menu-figure-${type}`).classList.toggle('activeForMenuFigure'); }) })

Answer 1 · 2020-08-15 10:24:33

Я так понимаю, что все элементы хранятся в одном контейнере с id #category? Если так можно использовать делегирование событий и навесить на него один обработчик

document.querySelector('#category').addEventListener('click', ({ target }) => {
  const category = ["genre", "type", "long", "country", "awards", "result", "actor"];
  const { id } = target;
  const categoryName = id.split('-').pop(); 
  if (!category.includes(categoryName)) return;
  document.querySelector(`#subcategory-block-${categoryName}`).classList.toggle('active');
  document.querySelector(`#menu-figure-${categoryName}`).classList.toggle('activeForMenuFigure');
})

Как уменьшить этот скрипт?

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