Показать сообщение отдельно
  #3 (permalink)  
Старый 19.05.2019, 22:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,069

фильтр товаров
nathan111777,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .show{
      background-color: #EEE8AA;
  }
  </style>

  <script>
     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"));
     }
  </script>
</head>

<body>
<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>

<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>

<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>
</body>
</html>

Последний раз редактировалось рони, 19.05.2019 в 22:31.
Ответить с цитированием