1
У меня есть действующий список продуктов, который генерируется jquery. Теперь мне нужно его фильтровать по атрибутам массива: цвету, размеру и цене. Я скопировал код из вопроса, который отфильтровал элементы списка по его классам, и он работал отлично, но для меня я просто не могу понять, как изменить это для фильтрации по атрибутам. Я думаю, что то, что нужно изменить, это в последней функции re.test($this.attr("class")).Как настроить мой фильтр флажка?
<!--HTML-->
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<title>Teste Vaga Front End</title>
<link href="css/style.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/js.js"></script>
</head>
<body onLoad="loadList()">
<header class="menu">
<div class="container">
<nav>
<ul class="menu-lt">
<li class="menu-it"><a class="menu-lk logo" href="#">Profite</a></li>
<li class="menu-it lst"><a class="menu-lk cart" href="#">Carrinho</a></li>
</ul>
</nav>
</div>
</header>
<h2 class="page-title container">Vestidos</h2>
<div class="content container">
<aside class="sidebar">
<h3 class="mobile-btn filter">Filtrar</h3>
<div id="filters" class="filters-wrapper">
<div class="fltrs-wppr">
<section id="colors">
<h4>Cores</h4>
<ul>
<li><input type="checkbox" name="colors" value="Amarelo"> Amarelo</li>
<li><input type="checkbox" name="colors" value="Azul"> Azul</li>
<li><input type="checkbox" name="colors" value="Branco"> Branco</li>
<li><input type="checkbox" name="colors" value="Cinza"> Cinza</li>
<li><input type="checkbox" name="colors" value="Laranja"> Laranja</li>
</ul>
</section>
<section id="sizes">
<h4>Tamanhos</h4>
<ul class="fltr-szs-lt">
<li class="fltr-szs-it"><span class="fltr-szs">P</span></li>
<li class="fltr-szs-it"><span class="fltr-szs">M</span></li>
<li class="fltr-szs-it"><span class="fltr-szs">G</span></li>
<li class="fltr-szs-it"><span class="fltr-szs">GG</span></li>
<li class="fltr-szs-it"><span class="fltr-szs">U</span></li>
<li class="fltr-szs-it"><span class="fltr-szs">36</span></li>
<li class="fltr-szs-it"><span class="fltr-szs">38</span></li>
<li class="fltr-szs-it"><span class="fltr-szs">40</span></li>
<li class="fltr-szs-it"><span class="fltr-szs">42</span></li>
<li class="fltr-szs-it"><span class="fltr-szs">44</span></li>
<li class="fltr-szs-it"><span class="fltr-szs">46</span></li>
</ul>
</section>
<section id="prices">
<h4>Faixa de Preço</h4>
<ul>
<li><input type="checkbox" name="prices" value="prc0-50"> de R$0 até R$50</li>
<li><input type="checkbox" name="prices" value="prc-51-150"> de R$51 até R$150</li>
<li><input type="checkbox" name="prices" value="prc-151-300"> de R$151 até R$300</li>
<li><input type="checkbox" name="prices" value="prc301-500"> de R$301 até R$500</li>
<li><input type="checkbox" name="prices" value="prc-501-fim"> a partir de R$501</li>
</ul>
</section>
</div>
</div>
</aside>
<section id="products" class="products">
<header class="products-hdr">
<h3 class="mobile-btn order">Ordenar</h3>
<select class="prd-order">
<option value="MaisRecentes">Mais Recentes</option>
<option value="MaiorPreco">Maior Preço</option>
<option value="MenorPreco">Menor Preço</option>
</select>
</header>
<ul id="ProductList" class="product-lt">
</ul>
</section>
</div>
</body>
</html>
var productList = {"products": [
{"image": "img/vestido1.jpg", "description": "Bata Bordada", "color": "amarelo", "size":"P", "price": "390.00"},
{"image": "img/vestido2.jpg", "description": "Chapéu de Praia com Fivela", "color": "cinza", "size":"M", "price": "520.00"},
{"image": "img/vestido3.jpg", "description": "Vestido Texturizado", "color": "branco", "size":"G", "price": "42.90"},
{"image": "img/vestido4.jpg", "description": "Bata Bordada", "color": "branco", "size":"GG", "price": "130.00"},
{"image": "img/vestido5.jpg", "description": "Chapéu de Praia com Fivela", "color": "amarelo", "size":"36", "price": "380.00"},
{"image": "img/vestido6.jpg", "description": "Vestido Texturizado", "color": "azul", "size":"38", "price": "44.00"},
{"image": "img/vestido7.jpg", "description": "Bata Bordada", "color": "cinza", "size":"40", "price": "180.90"},
{"image": "img/vestido8.jpg", "description": "Chapéu de Praia com Fivela", "color": "branco", "size":"42", "price": "560.00"},
{"image": "img/vestido2.jpg", "description": "Vestido Texturizado", "color": "cinza", "size":"44", "price": "122.90"}
]
};
//carrega lista sem filtros
function loadList() {
var list = $("#ProductList");
var _createELement="";
$(productList.products).each(function(index){
_createELement+=
'<li class="product-it"> <article class="product"> <span class="prd-img-wrapper"> <img class="prd-img" src="' + this.image + '"></span> <h2 class="prd-tit">' + this.description + '</h2> <span class="prd-wrap"><span class="prd-price"><span class="prd-prc"> R$' + this.price + '</span></br> <span class="prd-par">até 5x de R$' + parseFloat($(this.price).val()) /5.0 + '</span></span><a class="prd-cart" href="#">Adicionar ao carrinho.</a></span></article></li>'
});
$(list).append(_createELement);
}
//filtro
$("#filters :checkbox").click(function() {
var re = new RegExp($("#filters :checkbox:checked").map(function() {
return this.value;
}).get().join("|"));
$("li").each(function() {
var $this = $(this);
$this[re.source!="" && re.test($this.attr("class")) ? "show" : "hide"]();
});
});
это был вопрос, который я получил «фильтр "код от: http://stackoverflow.com/questions/8796472/filtering-with-checkboxes-using-jquery –
Мое решение работает для вас? – dinesh