Как оптимизировать, чтобы дважды не повторялся цикл forEach с одинаковыми селекторами?

Question

[Александр Янк]

Сделал dropdown на чистом JS. Все работает как надо, но хотел бы оптимизировать.

Как видите на 6 и 13 строчке повторяется перебор цикла forEach

dropdown.forEach((item) => {
})

Comments

[WbICHA]

То есть ты хочешь объединить два цикла, которые должны вызываться в разное время и разное количество раз, в один?
Великолепный план, Александр Янк . Просто охрененный, если я правильно понял. Надёжный, блин, как швейцарские часы.

[Александр Янк]

WbICHA, ну факт в том, что два раза перебирается один цикл. Может быть на функциях как-то сделать можно?

[WbICHA]

Александр Янк, и что? Они перебирают его в АБСОЛЮТНО разных ситуациях. Тебя не смущает, что триггер у них от "немного" разных событий?

Answer 1

[Александр Янк]

В общем нашел оптимальный способ реализации dropdown на нативном JS:

document.addEventListener('DOMContentLoaded', () => {
  const dropdownEl = '.js__dropdown';
  const dropdownActive = 'dropdown-active';

  function dropdownEach() {
    document.querySelectorAll(dropdownEl).forEach((el) => {
      if (el.classList.contains(dropdownActive)) {
        el.classList.remove(dropdownActive)
      }
    })
  }

  document.addEventListener('click', (event) => {
    const target = event.target

    if (target.classList.contains('js__dropdown-toggle')) {
      dropdownEach()
      target.closest(dropdownEl).classList.add(dropdownActive);
    } else if (target.closest('.js__dropdown-close')) {
      dropdownEach()
    } else if (!target.classList.contains('js__dropdown-toggle') && !target.closest(dropdownEl)) {
      dropdownEach()
    }
  })
});

Comments

[goshaLoonny]

Эмм... ясно. Отлично я помог...



Постараюсь в дальнейшем игнорировать ваши вопросы

Кстати ваш вопрос "Как оптимизировать, чтобы дважды не повторялся цикл forEach с одинаковыми селекторами?", а не "Как оптимально реализовать dropdown на нативном JS".