Как я могу оптимизировать / улучшить этот блок кода? - PullRequest
Новая
       45

Как я могу оптимизировать / улучшить этот блок кода?

0 голосов
/ 27 апреля 2020

Я довольно новичок в Javascript и пишу фрагмент кода для создания системы фильтрации для сетки портфеля (сетки примеров работы, которые фильтруются по категориям при нажатии кнопки).

Хотя код работает просто отлично, мне кажется, что я пишу его слишком неуклюже. Может кто-нибудь, пожалуйста, дайте мне знать, если есть способ, которым я могу упростить / улучшить этот блок кода?

Любая помощь будет высоко ценится - спасибо! : D 

var gridItem = document.querySelectorAll('.grid div');
var featuredItem = document.querySelector('.featured');
var filterBtn = document.querySelectorAll('.filter-btn');


function getAttributes(event) {
  event.preventDefault();

  var thisValue = event.target.getAttribute('data-filter');

  // Get grid item filter attributes
  for (let a = 0; a < gridItem.length; a++) {
    const gridFilterAttr = gridItem[a].getAttribute('data-filterType');
    if (thisValue == gridFilterAttr) {
      gridItem[a].classList.add('active')
      gridItem[a].classList.remove('not-active')
    } else if (thisValue == 'all') {
      gridItem[a].className = 'active';
      featuredItem.className = 'featured active'


    } else {
      gridItem[a].classList.remove('active')
      gridItem[a].classList.add('not-active')
    }
  }
}

for (let b = 0; b < filterBtn.length; b++) {
  filterBtn[b].addEventListener('click', getAttributes);

}
...