Как оптимизировать события в коде - JS?

354
09 мая 2022, 10:50

Вот код:

const filter = () => {
const menu = document.querySelector('.portfolio-menu'),
      items = menu.querySelectorAll('li'),
      btnAll = menu.querySelector('.all'),
      btnLovers = menu.querySelector('.lovers'),
      btnChef = menu.querySelector('.chef'),
      btnGirl = menu.querySelector('.girl'),
      btnGuy = menu.querySelector('.guy'),
      btnGrandmother = menu.querySelector('.grandmother'),
      btnGranddad= menu.querySelector('.granddad'),
      wrapper = document.querySelector('.portfolio-wrapper'),
      markAll = wrapper.querySelectorAll('.all'),
      markGirl = wrapper.querySelectorAll('.girl'),
      markLovers = wrapper.querySelectorAll('.lovers'),
      markChef = wrapper.querySelectorAll('.chef'),
      markGuy = wrapper.querySelectorAll('.guy'),
      no = document.querySelector('.portfolio-no');
const typeFilter = (markType) => {
    markAll.forEach(mark => {
        mark.style.display = 'none';
        mark.classList.remove('animated', 'fadeIn');
    });
    no.style.display = 'none';
    no.classList.remove('animated', 'fadeIn');
    if(markType) {
        markType.forEach(mark => {
            mark.style.display = 'block';
            mark.classList.add('animated', 'fadeIn');
        });
    } else {
        no.style.display = 'block';
        no.classList.add('animated', 'fadeIn');
    }
};
btnAll.addEventListener('click', () => {
    typeFilter(markAll);
});
btnLovers.addEventListener('click', () => {
    typeFilter(markLovers);
});
btnChef.addEventListener('click', () => {
    typeFilter(markChef);
});
btnGirl.addEventListener('click', () => {
    typeFilter(markGirl);
});
btnGuy.addEventListener('click', () => {
    typeFilter(markGuy);
});
btnGrandmother.addEventListener('click', () => {
    typeFilter();
});
btnGranddad.addEventListener('click', () => {
    typeFilter();
});
menu.addEventListener('click', (e) => {
    let target = e.target;
    if(target && target.tagName == "LI"){
        items.forEach(btn => btn.classList.remove('active'));
        target.classList.add('active');
    }
}); };

Как мне заменить множественные вызовы AddEventListener и функции typeFilter? Чтобы код работал также.

READ ALSO
Нет подключения к серверу Tomcat

Нет подключения к серверу Tomcat

Начал изучать SpringMVCОбучение происходило без проблем, но только до первого запуска первого приложения

369
Could not autowire. No beans of '' type found

Could not autowire. No beans of '' type found

Не получается заавтовайрить сервисПосдкажите куда смотреть

305
Почему не работает debug java? Ошибка: '127.0.0.1:62895', transport: 'socket'

Почему не работает debug java? Ошибка: '127.0.0.1:62895', transport: 'socket'

у меня с не работает функция debugошибки:

326
Отловить исключение при сохранении сущности, CrudRepository Spring

Отловить исключение при сохранении сущности, CrudRepository Spring

Пытаюсь отловить исключение при попытке дублирования полей во время сохранения пользователя (на поле ограничение UNIQUE)Использую save от CrudRepository,...

217