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

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

Здравствуйте, я новичок в 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, все они с одинаковым классом, но я не могу отслеживать елемент и применять класс именно к нему(не получается), как уменьшить скрипт?
  • Вопрос задан
  • 158 просмотров
Решения вопроса 1
twobomb
@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');
  })
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
bootd
@bootd
Гугли и ты откроешь врата знаний!
Использовать классы, для массива элементов

Сделал с учётом того, что в категорию вложены селекторы из вашего кода, т.к. 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');
  })
})
Ответ написан
@irdaxirdaxirdax
Обфусцируй
Ответ написан
FeST1VaL
@FeST1VaL
Тихий
как вариант добавить в data атрибут ваши названия определяющие поле и при клике забирать из например data-type
country и потом уже вешать класс на

document.querySelector('#subcategory-block-'+type).classList.toggle('active');
document.querySelector('#menu-figure-'+type).classList.toggle('activeForMenuFigure');
Ответ написан
@ArturFirst
Я так понимаю, что все элементы хранятся в одном контейнере с 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');
})
Ответ написан
Ваш ответ на вопрос

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

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