Как изменить фильтрацию товара по названию класса в html на свойства асоц. массива?
У меня есть фильтр товаров который, фильтрует страну по названию класса в 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 код чтобы сделать фильтрацию товаров по свойствам объектов ассоциативного массива? Например по стране производителю или по цене, также как я реализовал по первому примеру код фильтруя по названию класса. |
nathan111777,
https://javascript.ru/forum/misc/777...tml#post509074 |
Вообще не то, во-первых у меня отдельный JSON файл, а в этом примере массив в файле JS, вторых в примере вашем индексный масив а у меня асоциативний, и самое главное такому новичку как я такой сложный код как вы сбросили адаптировать под свой код это что-то из области фантастики. Надеюсь на то, что кто-то редактирует мой код и соединит этот JS:
$('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); }); } +с этим js кодом(редактировав его что б он фильтровал не в html по класу а в json по свойству 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'; // тогда отображаем } } } |
nathan111777,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/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; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> var data = { "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" } }; //убрать данные function filterShow() { var arr = [...document.querySelectorAll(".btn:checked")].map(({ value }) => value); var out = ''; for (var key in data) { if (arr.length) { var country = data[key].country; if (!arr.includes(country)) continue; } 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); } function init() { filterShow(); $(".btn").on("click", filterShow); $(".btn-filter").on("click", function() { $(".btn").prop("checked", false); filterShow() }) } $(function() { $.getJSON('goods.json', function(json) { //data = json;//убрать комментарий // init() //убрать комментарий }) init()//закомментировать }); </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">Все</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 id="goods"></div> </body> </html> |
спасибо большое, работает если ваш код написать в одном файле index.html , но когда пробую поместить мой ассоциативный масив :
var data = { "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" } }; //убрать данные в файл goods.json товары вообще не отображаются на странице... Я что-то еще должен прописать что б подключилось к файлу goods.json? Или в чем проблема? Запускал проект через локальный сервер Openserver. пробавал убрать то что закоментировано как вы написали: $(function() { $.getJSON('goods.json', function(json) { //data = json;//убрать комментарий // init() //убрать комментарий }) init()//закомментировать }); все равно не отображаются товары... |
nathan111777,
$(function() { var data; function filterShow() { var arr = [...document.querySelectorAll(".btn:checked")].map(({ value }) => value); var out = ''; for (var key in data) { if (arr.length) { var country = data[key].country; if (!arr.includes(country)) continue; } 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); } function init() { filterShow(); $(".btn").on("click", filterShow); $(".btn-filter").on("click", function() { $(".btn").prop("checked", false); filterShow() }) } $.getJSON('goods.json', function(json) { data = json; init() }) }); |
все равно не работает((
Сейчас сброшу ссилки на скриншоты, может вам так будет видна проблема: файлы проекта: https://cdn1.savepice.ru/uploads/201...bc7c5-full.png index.html: https://cdn1.savepice.ru/uploads/201...b19e1-full.png goods.json: https://cdn1.savepice.ru/uploads/201...549b8-full.png eshop.js: https://cdn1.savepice.ru/uploads/201...7948a-full.png |
nathan111777,
консоль что пишет? |
nathan111777,
зачем вы изменили свой Цитата:
|
nathan111777,
содержимое 'goods.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" } } |
Часовой пояс GMT +3, время: 22:37. |