Как при запуске сайта в блоке фильтра товаров отображались товары первого пункта, а не все

Question

function swithCategory(){
    const buttons = document.querySelectorAll('.buttonz')
    const s1_tovars = document.querySelectorAll('.s1-tovar')

    function filter (category, items){
        items.forEach((item) =>{
            const isItemFiltered = !item.classList.contains(category)
            
            if (isItemFiltered) {
                item.classList.add('hide')
            } else{
                item.classList.remove('hide')
            }
        })
    }

    buttons.forEach((button) => {
        button.addEventListener('click', () => {
            const bdf= button.dataset.filter
            filter( bdf, s1_tovars)
        })
    })
    
    
}

swithCategory()

<main>
  <div class="section1_block">
    <div class="sec1_filter">
      <button  class="buttonz button_type_laptops" data-filter="laptops">laptop</button>
      <button  class="buttonz button_type_Vcards" data-filter="videocards">videocards</button>
      <button  class="buttonz button_type_Hphones" data-filter="headphones">headphones</button>
      <button  class="buttonz button_type_board" data-filter="keyboards">keyboards</button>
    </div>

    <div class="sec1_catalog">
      <div class="sec1_tovars">
        <div class="s1-tovar laptops">ноут</div>
        <div class="s1-tovar laptops">ноут</div>
        <div class="s1-tovar videocards">видеокарты</div>
        <div class="s1-tovar headphones">наушники</div>
        <div class="s1-tovar keyboards">клавиатуры</div>
        <div class="s1-tovar headphones">наушники</div>
      </div>
    </div>  
  </div>
  <script src="js/script.js"></script>
</main>

У меня есть фильтр товаров, при запуске сайта показываются все товары, нужно чтоб при запуске сайта показывался только laptop

Answer 1

добавил у функции swithcategory параметр initial, и при ее вызове указываю 'laptops'

function swithCategory(initial){
    const buttons = document.querySelectorAll('.buttonz')
    const s1_tovars = document.querySelectorAll('.s1-tovar')

    function filter (category, items){
        items.forEach((item) =>{
            const isItemFiltered = !item.classList.contains(category)
            
            if (isItemFiltered) {
                item.classList.add('hide')
            } else{
                item.classList.remove('hide')
            }
        })
    }

    buttons.forEach((button) => {
        button.addEventListener('click', () => {
            const bdf= button.dataset.filter
            filter( bdf, s1_tovars)
        })
    })
    
    filter(initial, s1_tovars)
}

swithCategory('laptops')

.hide {
  display: none;
 }

<main>
  <div class="section1_block">
    <div class="sec1_filter">
      <button  class="buttonz button_type_laptops" data-filter="laptops">laptop</button>
      <button  class="buttonz button_type_Vcards" data-filter="videocards">videocards</button>
      <button  class="buttonz button_type_Hphones" data-filter="headphones">headphones</button>
      <button  class="buttonz button_type_board" data-filter="keyboards">keyboards</button>
    </div>

    <div class="sec1_catalog">
      <div class="sec1_tovars">
        <div class="s1-tovar laptops">ноут</div>
        <div class="s1-tovar laptops">ноут</div>
        <div class="s1-tovar videocards">видеокарты</div>
        <div class="s1-tovar headphones">наушники</div>
        <div class="s1-tovar keyboards">клавиатуры</div>
        <div class="s1-tovar headphones">наушники</div>
      </div>
    </div>  
  </div>
  <script src="js/script.js"></script>
</main>

БЛОГ НА HUSL

Как при запуске сайта в блоке фильтра товаров отображались товары первого пункта, а не все

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