Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.05.2019, 20:48
Аспирант
Отправить личное сообщение для nathan111777 Посмотреть профиль Найти все сообщения от nathan111777
 
Регистрация: 12.05.2019
Сообщений: 34

Как изменить код чтобы фильтр выбирал несколько товаров а не только последний которог
У меня на сайте интернет магазина есть фильтр товаров с четырьмя кнопками четырех товаров и кнопкой "выбрать все". Но нельзя выбрать два или три товара, потому что когда ставлю галочку у следующего товара то исчезает предыдущий товар.Что исправить в этом коде чтобы можно было выбрать два или три товара?
<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, 19.05.2019 в 21:09.
Ответить с цитированием
  #2 (permalink)  
Старый 19.05.2019, 21:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,503

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

фильтр товаров
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.
Ответить с цитированием
  #4 (permalink)  
Старый 19.05.2019, 23:36
Аспирант
Отправить личное сообщение для nathan111777 Посмотреть профиль Найти все сообщения от nathan111777
 
Регистрация: 12.05.2019
Сообщений: 34

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

Последний раз редактировалось nathan111777, 19.05.2019 в 23:52.
Ответить с цитированием
  #5 (permalink)  
Старый 20.05.2019, 00:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,503

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

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>
Ответить с цитированием
  #7 (permalink)  
Старый 20.05.2019, 12:05
Аспирант
Отправить личное сообщение для nathan111777 Посмотреть профиль Найти все сообщения от nathan111777
 
Регистрация: 12.05.2019
Сообщений: 34

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

Последний раз редактировалось nathan111777, 20.05.2019 в 12:14.
Ответить с цитированием
  #8 (permalink)  
Старый 20.05.2019, 12:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,503

Сообщение от nathan111777
троиточие после квадратных скобок.
Оператор «spread»
Ответить с цитированием
  #9 (permalink)  
Старый 20.05.2019, 12:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,503

Сообщение от nathan111777
а троеточие обязательно ставить?
нет, можно прямо
document.querySelectorAll(sel).forEach
вместо [...document.querySelectorAll(sel)].forEach
NodeList.forEach
Ответить с цитированием
  #10 (permalink)  
Старый 20.05.2019, 12:16
Аспирант
Отправить личное сообщение для nathan111777 Посмотреть профиль Найти все сообщения от nathan111777
 
Регистрация: 12.05.2019
Сообщений: 34

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать, чтобы скрипт работал только если текущий документ iframe? ruslan_mart Общие вопросы Javascript 10 14.01.2015 12:56
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 11:29
как сделать чтобы данная сылка показывалось только в popup окне ? sarik Общие вопросы Javascript 3 14.03.2013 14:01
Как сделать чтобы пользователь только мог 2 раза прослушать запись? KOTDG AJAX и COMET 0 11.02.2012 20:37
Как сделать чтобы text() брал только текст родителя без текста вложенных контейнеров? Andrey32 jQuery 3 23.05.2009 00:33