@nathan111777

Что добавить в этом JS коде чтобы сначала отображались все товары?

Есть фильтр товаров который показывает товар, если поставить галочку напротив него, но сначала не показывает ни одного товара, а я хочу чтобы все товары показывало, а уже когда пользователь ставит галочку возле товара или нескольких тогда отображались только избранные товары. Что добавить в этом JS коде чтобы сначала отображались все товары?

<div class="filter">
    <div class="filter-inner">
        <div class="dropdown">
        <button onclick="myFunction()" class="dropbtn">Страна</button>
        <div id="myDropdown" class="dropdown-content">
        <button class="btn-filter" onclick="filterSelection('all')"> Все</button>
  <input type="checkbox"  class="btn" onclick="filterSelection('turkey')"> Турция<br>
  <input type="checkbox"  class="btn" onclick="filterSelection('china')"> Китай<br>
  <input type="checkbox"  class="btn" onclick="filterSelection('france')"> Франция<br>
  <input type="checkbox" class="btn" onclick="filterSelection('italy')"> Италия<br>
        </div>
        </div>
    </div>

div class="placeholder turkey Amoda polyester">
<div class="placeholder-image">
<img src="foto/woman/clothes/1.jpg">
</div>
<button type="submit" class="btn-buy">Купить</button>
<div class="price">Цена: 0,00 </div>
</div>

<div class="placeholder china Bmoda polyester">
<div class="placeholder-image">
<img src="foto/woman/clothes/6.jpg">
</div>
<button type="submit" class="btn-buy">Купить</button>
<div class="price">Цена: 0,00 </div>
</div>

<div class="placeholder france Cmoda cotton">
<div class="placeholder-image ">
<img src="foto/woman/clothes/9.jpg">
</div>
<button type="submit" class="btn-buy">Купить</button>
<div class="price">Цена: 0,00 </div>
</div>

<div class="placeholder italy Dmoda cotton">
<div class="placeholder-image">
<img src="foto/woman/clothes/15.jpg">
</div>
<button type="submit" class="btn-buy">Купить</button>
<div class="price">Цена: 0,00 </div>
</div>


let method = ["add", "remove"];
     function filterSelection(cls)
     {
       let sel = ".placeholder";
       if(cls == "all") {
           [...document.querySelectorAll(sel)].forEach(el =>  el.classList[method[0]]("show"));
           const check = method[0] == "add";
           [...document.querySelectorAll(".btn")].forEach(btn =>  btn.checked = check)
           method.reverse()
       }
       else [...document.querySelectorAll(sel + "." + cls)].forEach(el =>  el.classList.toggle("show"));
     }
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
joeberetta
@joeberetta Куратор тега JavaScript
Читай: https://epdf.pub/google-for-dummies.html
Изначально добавьте класс show в нужных местах(точнее во всех товарах) а потом уже используйте toggle чтоб менять фильтры
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
25 нояб. 2024, в 18:18
20000 руб./за проект
25 нояб. 2024, в 18:00
5000 руб./за проект
25 нояб. 2024, в 17:47
5000 руб./за проект