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

Question

[head space]

Как оптимизировать код из 34 строчек в нормальный цикл. Сейчас все работает через разные классы и через отслеживание клика. https://jsfiddle.net/head__space/adkzs687/

Answer 1

[Дмитрий]

Так

const wrapFilters = ',1,2,3'.split(',').map(v => document.querySelector('.wrap__filter' + v))
  const filters = Array.from(['one', 'two', 'three', 'four'],
      (v, ind) => document.querySelector('.filter__' + v).addEventListener('click', () => {
          wrapFilters.forEach((wrapFilter, wrapIndex) => {
            const methodName = index === wrapIndex ? 'toggle' : 'remove'
            wrapFilter.classList[methodName]('opened')
          })
      }))

или оставить два класса и сделать так

const wrapFilters = document.querySelectorAll('.wrap__filter')
  const filters = Array.from(document.querySelector('.filter')).forEach((el, ind) => {
    el.addEventListener('click', () => {
      wrapFilters.forEach((wrapFilter, wrapIndex) => {
        const methodName = index === wrapIndex ? 'toggle' : 'remove'
        wrapFilter.classList[methodName]('opened')
      })
    })
  })