Javascript-форум - Показать сообщение отдельно - Как изменить фильтрацию товара по названию класса в html на свойства асоц. массива?

nathan111777 · #1 (**permalink**) 23.06.2019, 14:18

У меня есть фильтр товаров который, фильтрует страну по названию класса в HTML (placeholder turkey) или (placeholder china) ,благодаря JS коду:

JS:

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'; // тогда отображаем
    }
  }
}

и 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">Все</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">
<div class="placeholder-image">
<img src="https://cdn.shopify.com/s/files/1/2671/4680/products/pol_dress_sage_240x.jpg?v=1553634712">
</div>
<button type="submit" class="btn-buy">Turkey</button>
<div class="price">Цена: 0,00 </div>
</div>

<div class="placeholder china">
<div class="placeholder-image">
<img src="https://cdn.shopify.com/s/files/1/0519/8561/products/IMG_5881_76665333-5efd-46da-b57e-2472ddb55697_240x.jpg?v=1548397696">
</div>
<button type="submit" class="btn-buy">Chine</button>
<div class="price">Цена: 0,00 </div>
</div>

<div class="placeholder france">
<div class="placeholder-image ">
<img src="https://cdn.shopify.com/s/files/1/0073/5671/1030/products/websizedphotos_1_copy_6_522fb324-3529-4e22-989e-0924860cb34d_240x.png?v=1553665976">
</div>
<button type="submit" class="btn-buy">France</button>
<div class="price">Цена: 0,00 </div>
</div>

<div class="placeholder italy">
<div class="placeholder-image">
<img src="https://cdn.shoptiques.com/shoptiques-shop/products/mock-neck-dress-14-blue-9f38a7d3_pl.jpg">
</div>
<button type="submit" class="btn-buy">Italy</button>
<div class="price">Цена: 0,00 </div>
</div>

Но со временем благодаря советам более опытных программистов, я решил товары выводить на страницу с помощью JSON, так как товаров может быть несколько тысяч на одном сайте. Вот так:

HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="goods">

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/eshop.js"></script>
</body>
</html>

JSON (он же асоциативний массив):

{
  "11292" : {
    "name" : "Платье1",
      "cost" : 50,
    "country" : "turkey",
    "image" : "https://cdn.shopify.com/s/files/1/2671/4680/products/pol_dress_sage_240x.jpg?v=1553634712"
  },
  "11294" : {
    "name" : "Платье2",
      "cost" : 150,
    "country" : "china",
    "image" : "https://cdn.shopify.com/s/files/1/0519/8561/products/IMG_5881_76665333-5efd-46da-b57e-2472ddb55697_240x.jpg?v=1548397696"
  },
  "11295" : {
    "name" : "Платье3",
    "cost" : 200,
    "country" : "france",
    "image" : "https://cdn.shopify.com/s/files/1/0073/5671/1030/products/websizedphotos_1_copy_6_522fb324-3529-4e22-989e-0924860cb34d_240x.png?v=1553665976"
  },
    "11296" : {
    "name" : "Платье4",
    "cost" : 300,
    "country" : "italy",
    "image" : "https://cdn.shoptiques.com/shoptiques-shop/products/mock-neck-dress-14-blue-9f38a7d3_pl.jpg"
  }
}

JS который просто выводит JSON на страницу:

$('document').ready(function(){
    loadGoods();
});

function loadGoods() {
    //загружаю товары на страницу
    $.getJSON('goods.json', function (data) {
        //console.log(data);
        var out = '';
        for (var key in data){
            out+='<div class="single-goods">';
            out+='<h3>'+data[key]['name']+'</h3>';
            out+='<p>Цена: '+data[key]['cost']+'</p>';
            out+='<img src="'+data[key].image+'">';
            out+='<button class="add-to-cart" data-art="'+key+'">Купить</button>';
            out+='</div>';
        }
        $('#goods').html(out);
        $('button.add-to-cart').on('click', addToCart);
    });
}

CSS:

.single-goods {
    width: 300px;
    height: 500px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    text-align: center;
}
.single-goods button {
    display: block;
    margin: 20px auto;
}

Как написать JS код чтобы сделать фильтрацию товаров по свойствам объектов ассоциативного массива? Например по стране производителю или по цене, также как я реализовал по первому примеру код фильтруя по названию класса.