Как не дублировать код?

Question

У меня есть код, отвечающий за добавления и удаление классов. Я бы хотела чтобы код (который идет после коммента), работал на множестве элементов. Сейчас он не работает т.к."document.getElementsByClassName('div-icons-wrapper')" возвращает массив. Можно ли кусок кода( который идет после коммента) применить к нескольким элементам?

function Burger(burger, menu) {
  this.burger = burger
  this.menu = menu
  let self = this
  let attribute = `data-burger-${Math.random()}`;
  this.burger.setAttribute('data-burger', attribute)
  this.menu.setAttribute('data-burger', attribute)
  Array.from(this.burger.querySelectorAll('*')).forEach(el => {
      el.setAttribute('data-burger', attribute)
  })
  Array.from(this.menu.querySelectorAll('*')).forEach(el => {
      el.setAttribute('data-burger', attribute)
  })
  this.burger.addEventListener('click', function (e) {
      document.body.classList.toggle('overflow-js')
      self.menu.classList.toggle('active')
      this.classList.toggle('open')
      window.addEventListener('scroll', noScroll)
  })

  document.addEventListener('click', function (e) {
      if (e.target.getAttribute('data-burger') == attribute) {
          return false
      }
      self.burger.classList.remove('open')
      self.menu.classList.remove('active')
      document.body.classList.remove('overflow-js')
  })

  function noScroll(e) {
      e.preventDefault();
  }
};

      //коммент
         try {
              let divButton = document.querySelector('.div-wrapper .div')
              let divPanel = document.getElementsByClassName('div-icons-wrapper')[0]
              new Burger(divButton, divPanel)
          } catch (e) {
              console.log(e)
          }

.div{
 width: 100px;
  height:100px;
   border: 1px solid #dfdfdf;
}
.div-icons-wrapper {
    opacity: 0;
    pointer-events: none;
    display: block;
    position: absolute;
    z-index: 9;
    width: 100px;
  height:100px;
    right: 0;
    top: 0;
    border: 1px solid #dfdfdf;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    background: #fff;
    padding: 0;
}

.div-icons-wrapper.active {
    opacity: 1;
    pointer-events: all;
}

<div class="div-wrapper">
    <div class="div"> </div>
</div>

<div class="div-icons-wrapper">
  <div class="div-icons-war">
    <span>ТЕксттекстеТЕксттексте</span>
  </div>
</div>

<script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
  crossorigin="anonymous"></script>

т.е. чтобы не трогать код до коммента.

Или же если я создам такой же элемент и просто поменяю классы в этом коде

 try {
              let divButton = document.querySelector('.div-wrapper .div')
              let divPanel = document.getElementsByClassName('div-icons-wrapper')[0]
              new Burger(divButton, divPanel)
          } catch (e) {
              console.log(e)
          }

это не будет считаться дублированием?

Answer 1

Получить все «бургеры» можно с помощью map

 try {
      let divButtons = document.querySelectorAll('.div-wrapper .div')
      let divPanels = [...document.querySelectorAll('.div-icons-wrapper')]
      let burgers = divPanels.map((divPanel, i)=>new Burger(divButtons[i], divPanel));          
 } catch (e) {
     console.log(e)
 }

БЛОГ НА HUSL

Как не дублировать код?

Ответы (1 шт):