-3

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

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

0

1 ответ 1

-1

Если класс товара, в котором указана страна всегда второй после класса placeholder тогда при проставлении галки добавляем страну чекбокса в массив выбранных стран, а при снятии галки убираем ее оттуда. В этот же момент скрываем все товары кроме тех, у которых второй класс (страна) содержится в массиве выбранных. Чексбоксам я присвоил атрибуты value с названиям стран, onclick убрал, а вместо Купить для наглядности вписал названия стран

Вот полный код:

var allProducts = document.getElementsByClassName('placeholder');
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var selected_countries = [];

// отобразить все товары
document.getElementsByClassName('btn-filter')[0].addEventListener('click', function(){
  for(var i = 0; i < allProducts.length; i++) {
    allProducts[i].style.display = 'block';
  }
});

// ловим клики по чекбоксам
for(var k = 0; k < checkboxes.length; k++) {
  checkboxes[k].addEventListener('click', function(){
    showHideProducts(this);
  });
}

// и скрываем или отображаем соответственные ячейки товаров
function showHideProducts(thisInput) {

  if(thisInput.checked == true) { // при проставлении галки
    // добавляем страну в массив выбранных стран
    selected_countries.push(thisInput.value);

  } else { // а при снятии галки

    var index = selected_countries.indexOf(thisInput.value);
    if(index > -1) {

      // удаляем страну с массива
      selected_countries.splice(index, 1);
    }
  }
	
  for(var i = 0; i < allProducts.length; i++) {

    // берем второй класс ячейки товара т.е. его страну
    var secondClass = allProducts[i].className.split(' ')[1];

    // если второй класс ячейки товара (страна) НЕ содержится в массиве выбранных стран
    if(!~selected_countries.indexOf(secondClass)) {

      allProducts[i].style.display = 'none'; // тогда скрываем ячейку

    } else { // а если содержится
      allProducts[i].style.display = 'block'; // тогда отображаем
    }
  }
}
<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">Все</button>
        <input type="checkbox" class="btn" value="turkey"> Турция<br>
        <input type="checkbox" class="btn" value="china"> Китай<br>
        <input type="checkbox" class="btn" value="france"> Франция<br>
        <input type="checkbox" class="btn" value="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">Turkey</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">Chine</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">France</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">Italy</button>
<div class="price">Цена: 0,00 </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.