Показать сообщение отдельно
  #6 (permalink)  
Старый 20.05.2019, 00:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

nathan111777,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hide{
     display: none;
  }
  </style>

  <script>
addEventListener("load", () => {
    let check = true;
    document.querySelector(".filter").addEventListener("click", ({target}) => {
        const el = target.closest("[data-filter]");
        if (!el) return;
        let cls = target.dataset.filter;
        if (cls == "all") {
            [...document.querySelectorAll(".btn")].forEach(btn => btn.checked = check)
            check = !check;
        }
        let sel = ".placeholder";
        [...document.querySelectorAll(sel)].forEach(el => el.classList.add("hide"));
        [...document.querySelectorAll(".btn:checked")].forEach(btn => {
            cls = btn.dataset.filter;
            [...document.querySelectorAll(sel + "." + cls)].forEach(el => el.classList.remove("hide"));
        })
    })
})
  </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" data-filter="all"> Все</button>
  <input type="checkbox"  class="btn" data-filter="turkey"> Турция<br>
  <input type="checkbox"  class="btn" data-filter="china"> Китай<br>
  <input type="checkbox"  class="btn" data-filter="france"> Франция<br>
  <input type="checkbox"  class="btn" data-filter="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>
Ответить с цитированием