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

Question

[artem]

Здравствуйте, я новичок в 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, все они с одинаковым классом, но я не могу отслеживать елемент и применять класс именно к нему(не получается), как уменьшить скрипт?

Comments

[Ярослав Иванов]

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

[twobomb]

Я бы всетаки пересмотрел структуру ну можно так

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

Comments

[artem]

Спасибо, помог разобраться в этом! До этого момента вообще не знал о существовании такого метода)

кстати, почему ты указал переменную 'c' в '${}' ? Работает просто приплюсовав за областью строки

[twobomb]

artem, ну в жаваскрипте есть милион способов сделать конкатенацию строк, это один из них.
А что за метод ты не знал, циклы?

[artem]

twobomb, forEach

[twobomb]

artem, Мне кажется вам нужно открыть документацию и удивиться сколько есть методов работы с массивами.

Answer 2

[Дима Паутов]

Использовать классы, для массива элементов

Сделал с учётом того, что в категорию вложены селекторы из вашего кода, т.к. html разметку вы не показали. Дальше сами

document.querySelectorAll('.category').forEach(category -> {
  category.addEventListener('click', function (event) {
    event.preventDefault();

    this.querySelector('.subcategory-block').classList.toggle('active');
    this.querySelector('.menu-figure-genre').classList.toggle('activeForMenuFigure');
  })
})

Answer 3

[irdaxirdaxirdax]

Обфусцируй

Comments

[Ярослав Иванов]

Всего доброго. Мы вам перезвоним.

Answer 4

[FeST1VaL]

как вариант добавить в data атрибут ваши названия определяющие поле и при клике забирать из например data-type
country и потом уже вешать класс на

document.querySelector('#subcategory-block-'+type).classList.toggle('active');
document.querySelector('#menu-figure-'+type).classList.toggle('activeForMenuFigure');

Answer 5

[Артур Т]

Я так понимаю, что все элементы хранятся в одном контейнере с 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');
})