Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как изменить код чтобы фильтр выбирал несколько товаров а не только последний которог (https://javascript.ru/forum/misc/77558-kak-izmenit-kod-chtoby-filtr-vybiral-neskolko-tovarov-ne-tolko-poslednijj-kotorog.html)

nathan111777 19.05.2019 20:48
Как изменить код чтобы фильтр выбирал несколько товаров а не только последний которог
 
У меня на сайте интернет магазина есть фильтр товаров с четырьмя кнопками четырех товаров и кнопкой "выбрать все". Но нельзя выбрать два или три товара, потому что когда ставлю галочку у следующего товара то исчезает предыдущий товар.Что исправить в этом коде чтобы можно было выбрать два или три товара?
<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>



filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("placeholder");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}

рони 19.05.2019 21:01
nathan111777,
убрать строку 7

рони 19.05.2019 22:29
фильтр товаров
 
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>

nathan111777 19.05.2019 23:36
Спасибо,работает, но только при загрузке страницы нет товаров вообще.Нужно что б изначально были все товары, а вот когда я выбираю страну производитель, то тогда уменьшается количество до двух или трех стран в зависимости сколько я выбрал их. Как это сделать?
И что это за квадратные скобки с троеточием спереди в которые вы поместили метод .querySelectorAll?:
[...document.querySelectorAll(".btn")]

рони 20.05.2019 00:10
Цитата:
Сообщение от nathan111777
И что это за квадратные скобки
массив, созданный из списка элементов.

рони 20.05.2019 00:53
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>

nathan111777 20.05.2019 12:05
Теперь товар вообще не появляется даже если выбрать какой-то товар(
Понял, а троеточие обязательно ставить? и зачем оно? никогда просто не видел в масивах троиточие после квадратных скобок.

рони 20.05.2019 12:08
Цитата:
Сообщение от nathan111777
троиточие после квадратных скобок.
Оператор «spread»

рони 20.05.2019 12:13
Цитата:
Сообщение от nathan111777
а троеточие обязательно ставить?
нет, можно прямо
document.querySelectorAll(sel).forEach
вместо [...document.querySelectorAll(sel)].forEach
NodeList.forEach

nathan111777 20.05.2019 12:16
Теперь товар вообще не появляется даже если выбрать какой-то товар(

рони 20.05.2019 12:19
Цитата:
Сообщение от nathan111777
Теперь товар вообще не появляется даже если выбрать какой-то товар(
здесь код работает? если да, то изучите весь предложенный код.


Часовой пояс GMT +3, время: 12:40.