如何使我的复选框过滤器工作
How to make my checkbox filter work?
我有一个由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"]();
});
});
这对我来说很有效。这里很少有值被改变，比如-prc0-50 => prc-0-50。这些值正在被JS中的priceRange对象使用
<h4>Faixa de Preço</h4>
<ul>
<li><input type="checkbox" name="prices" value="prc-0-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="prc-301-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>
Please try this JS
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"}
]
};
var priceRange = {
50: 'prc-0-50',
150: 'prc-51-150',
300: 'prc-151-300',
500: 'prc-301-500',
10000000000: 'prc-501-fim'
}
//carrega lista sem filtros
function loadList() {
var list = $("#ProductList");
var _createELement = "";
$(productList.products).each(function(index) {
var $this = this;
var priceRangeClass = '';
var productColor = (this.color).toLowerCase();
for (index in priceRange) {
if (parseFloat($this.price) <= parseFloat(index)) {
priceRangeClass = priceRange[index];
break;
}
}
_createELement +=
'<li class="product-it ' + priceRangeClass + ' ' + productColor + '"> <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) / 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 list = $("#ProductList");
var re = new RegExp($("#filters :checkbox:checked").map(function() {
return (this.value).toLowerCase();
}).get().join("|"));
list.children("li").show();
list.children("li").each(function() {
var $this = $(this);
$this[re.source != "" && re.test($this.attr("class")) ? "show" : "hide"]();
});
});
}
我相信你可以实现基于大小的过滤
首先，你必须修改你的渲染函数，添加颜色attr:
$(productList.products).each(function(index){
_createELement+=
'<li class="product-it" color="'+ this.color +'"> <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>'
});
然后你可以过滤你的列表:
function filterBYColor(color) {
$('.product-it').each(function(){
var $this = $(this); //your li
if ($(this).attr('color') == color) {
$this.show(); //show it if it has the right color
} else {
$this.hide(); //hid id it's not
}
})
};
试一试:
filterByColor('azul');
编辑另一个按多种颜色进行筛选的函数:
filterByColors(colors) {
$('.product-it').each(function(){
var $this = $(this); //your li
var color = $this.attr('color'); //it's color
if (color && colors.indexOf(color) != -1) {
$this.show(); //show it if it has the right color
} else {
$this.hide(); //hid id it's not
}
})
}
$(document).on('change', '[name="prices"]', function(){
var $this = $(this);
var color = $this.val();
var colors = [];
$('[name="prices"]').each(function(){
if ($(this).prop('checked')) {
colors.push($(this).attr('color'));
}
})
filterByColors(colors);
})
只需将此代码添加到页面，它将工作。
相关文章：
- 让我自己的过滤器不工作
- 角度过滤器可以工作，但将输入视为未定义并抛出错误
- ng repeat在ng repeat-过滤器不工作
- 异步加载的SVG过滤器feColorMatrix在Chrome中工作，而不是在Safari或Firefox中
- 角度过滤器不工作
- Angular/Ionic/Javascript:无法让下拉过滤器作为复选框工作
- 角度:搜索器(过滤器）根据数据类型工作不同
- Angularjs ng-repeat过滤器在v1.0.1中工作，而不是v1.3.7
- 如果可能的话，我需要帮助了解这个jQuery过滤器函数是如何工作的，逐行工作
- 无法让 Angular 自定义过滤器工作
- Angularjs 过滤器无法按预期工作
- 角度 - 自定义过滤器如何真正工作
- jQuery点击按钮don'在剑道网格中应用过滤器后无法工作
- 角度自定义指令基本输入过滤器工作不正常，只显示匹配的第一个实例
- 选择2过滤器不工作
- 范围过滤器仅在第一个控制器中工作
- 剑道源过滤器不工作
- 为什么我在Meteor反应表中的自定义过滤器不工作
- JQuery表过滤器工作太慢
- 如何使我的复选框过滤器工作
