Javascript-форум - Как изменить код чтобы фильтр выбирал несколько товаров а не только последний которог

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)

Как изменить код чтобы фильтр выбирал несколько товаров а не только последний которог

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

<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(" ");
}

nathan111777,
убрать строку 7

фильтр товаров

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>

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

Цитата:

Сообщение от nathan111777

И что это за квадратные скобки

массив, созданный из списка элементов.

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

троиточие после квадратных скобок.

Оператор «spread»

Цитата:

Сообщение от nathan111777

а троеточие обязательно ставить?

нет, можно прямо
document.querySelectorAll(sel).forEach
вместо [...document.querySelectorAll(sel)].forEach
NodeList.forEach

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