Jak uprościć zapis dodania listenera i wykonania go na tych elementach?

0

Czy można uprościć ten zapis, żeby był czytelniejszy i krótszy?

    const navs = document.querySelectorAll('div.arrow, nav.menu');
    navs.forEach(e => {
        e.addEventListener('click', function () {
            navs.forEach(l => {
                l.classList.toggle('on');
            });
        });
    });

Tutaj ten kod w działaniu: https://jsfiddle.net/763r4pwt/

2

Tak, można uprościć. Do takich rzeczy często się używa jQuery. Myślę, że poznając go, można skrócić kod o ponad 50%.

1
const navItems = document.querySelectorAll('div.arrow, nav.menu');

navItems.forEach(e => e.addEventListener('click', () => navItems.forEach(l => l.classList.toggle('on'))));

Możesz używać short arrow function zamiast zwykłej, poza tym raczej go nie uprościsz, ew. możesz spróbować tą strzałkę umieścić w środku menu (nav.menu) jakoś tak żeby navItems nie był tablicą, wtedy będziesz mógł się pozbyć też tych forEach. Odradzam używanie jQuery, w dzisiejszych czasach to zazwyczaj niepotrzebne kB wysyłane do użytkownika.

Odradzam też używania skróconych nazw jak e, l, - e może oznaczać np. event a chodzi o element, a dokładnie o navElement.

1 użytkowników online, w tym zalogowanych: 0, gości: 1