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

270
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Обучение происходило без проблем, но только до первого запуска первого приложения

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

Could not autowire. No beans of '' type found

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

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

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

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

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

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

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

140