如何組合選擇器和選項卡功能？

Question

我想縮短此代碼，但不知道如何。

代碼的工作方式是，當您按下選擇器中的按鈕時，會出現 map 點和 map 底部的文本。 它以這種方式工作，但我確信有一種方法可以縮短它。 我只是沒有足夠的知識來縮短它。

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.select__item').forEach( function(tabBtn) {
    tabBtn.addEventListener('click', function(event) {
      const path = event.currentTarget.dataset.path

      document.querySelectorAll('.sketch__item',).forEach( function(tabContent) {
        tabContent.classList.remove('block-active')
      })
      document.querySelectorAll('.details__item',).forEach( function(tabContent) {
        tabContent.classList.remove('block-active')
      })
        document.querySelectorAll(`[data-target="${path}"]`).forEach( function(tabsTarget) {
          tabsTarget.classList.add('block-active')
    })
    })
  })
  //*** tabs active
  let tabsChange = document.querySelectorAll('.select__item')

  tabsChange.forEach(button => {
    button.addEventListener('click', function () {
      tabsChange.forEach(btn => btn.classList.remove('active__tab'))
      this.classList.add('active__tab')
    })
  })
})

let select = function () {
  let selectHeader = document.querySelectorAll('.select__header');
  let selectItem = document.querySelectorAll('.select__item');

  selectHeader.forEach(item => {
    item.addEventListener('click', selectToggle)
  });

  selectItem.forEach(item => {
    item.addEventListener('click', selectChoose)
  });

  function selectToggle() {
    this.parentElement.classList.toggle('is-active');
  }

  function selectChoose() {
    let text = this.innerText,
        select = this.closest('.partner__select'),
        currentText = select.querySelector('.select__current');
    currentText.innerText = text;
    select.classList.remove('is-active');
  }
};

//*** Tabs

select();

Answer 1

委托縮短了代碼。

如果您委托您縮短代碼。 永遠不要在容器中循環事件監聽器。 改用容器

我丟了 20 行代碼，讓代碼更容易調試

注意：我沒有您的 HTML，所以我可能創建了一些您需要解決的錯誤或邏輯問題

const selectChoose = e => {
  const tgt = e.target;
  let text = tgt.innerText,
    select = tgt.closest('.partner__select'),
    currentText = select.querySelector('.select__current');
  currentText.innerText = text;
  select.classList.remove('is-active');
};
const selectToggle = e => e.target.parentElement.classList.toggle('is-active');

window.addEventListener('load', function() {
  const container = document.getElementById('container');
  container.addEventListener('click', e => {
    const tgt = e.target.closest('.select');
    if (tgt) {
      const path = tgt.dataset.path;
      document.querySelectorAll('.item', ).forEach(tabContent => tabContent.classList.remove('block-active'))
      document.querySelectorAll(`[data-target="${path}"]`).forEach(tabsTarget => tabsTarget.classList.add('block-active'))
    }
  })
  const tabContainer = document.getElementById('tabContainer');
  //*** tabs active
  tabContainer.addEventListener('click', e => {
    const tgt = e.target.closest('button');
    if (tgt) {
      tabContainer.querySelectorAll('.active__tab').forEach(tab => tabclassList.remove('active__tab'))
      tgt.classList.add('active__tab')
    }
  }) const selContainer = document.getElementById('selectContainer');
  selContainer.addEventListener('click', e => {
    const tgt = e.target;
    if (tgt.classList.contains('select__header')) selectToggle(e);
    else if (tgt.classList.contains('select__item')) selectChoose(e)
  })
})