产品过滤器算法需要改进 [英] product filter algorithm needs improvement
问题描述
我写了一个基本的产品过滤器算法，当我坚持使用一个过滤器时，它可以正常工作，但是当我尝试组合过滤器时，会出错.
I have written a basic product filter algorithm that works fine when I stick to one filter, however when I try to combine filters things go wrong.
当我取消选中复选框时，算法仅检查选中复选框的过滤器，而不检查其他(选中)复选框的过滤器.我建议您看一下我的代码的 JSFiddle ，它比我可以解释的更加清楚.
When I uncheck a checkbox the algorithm only checks the filter of the checked checkbox, but does not check the filter of other (checked) checkboxes. I suggest you have a look at the JSFiddle of my code, it will be clearer than I could explain.
我正在寻找有关改进过滤器算法的一些建议
I am looking for some suggestions on improving the filter algorithm
Link to JSFiddle
如果您选中每个复选框，然后取消选中每个合作伙伴，则所有产品都将被隐藏，但是类别复选框仍处于选中状态，因此应显示一些产品.
If you check every checkbox and uncheck every partner all the products are hidden, but the category checkboxs are still checked so some products should be shown.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.product').hide();
$(function() {
$('.filter').on('click', function() {
var filter = $(this).attr("filter");
var data = $(this).attr("data");
if ($(this).is(':checked')) {
$('.product').each(function (i, obj) {
if ($(obj).attr(filter) == data) {
$(obj).show();
}
});
} else if (!$(this).is(':checked')) {
$('.product').each(function (i, obj) {
if ($(obj).attr(filter) == data) {
$(obj).hide();
}
});
}
});
});
});
</script>
</head>
<body>
<p>Category</p>
<div>
<input class="filter" filter="category" data="boeken" type="checkbox" />
books
</div>
<div>
<input class="filter" filter="category" data="spellen" type="checkbox" />
games
</div>
<div>
<input class="filter" filter="category" data="andere" type="checkbox" />
other
</div>
<p>Partners</p>
<div>
<input class="filter" filter="partner" data="amazon" type="checkbox" />
amazon
</div>
<div>
<input class="filter" filter="partner" data="ebay" type="checkbox" />
ebay
</div>
<div class="products">
<div class="product" category="boeken" partner="amazon" />
Product 1
</div>
<div class="product" category="spellen" partner="ebay" />
Product 2
</div>
<div class="product" category="andere" partner="ebay"/>
Product 3
</div>
<div class="product" category="andere" partner="amazon"/>
Product 4
</div>
</div>
</body>
</html>
推荐答案
- 单击过滤器时隐藏所有产品.
- 对于
each选中的过滤器，如果产品的数据与过滤器匹配，则显示产品.请参见 http://api.jquery.com/attribute-equals-selector/ - 如果有多个合作伙伴，请 以逗号分隔
data，然后使用
- Hide all products when a filter is clicked.
- For
eachchecked filter, show products if their data matches the filter. See http://api.jquery.com/attribute-equals-selector/ - In case of multiple partners, split
dataon a comma, and loop through thedataarray using $.each.
摘要
$('.product').hide();
$('.filter').click(function() {
$('.product').hide();
$('.filter:checked').each(function() {
var filter = $(this).attr('filter');
var data = $(this).attr('data').split(', ');
$.each(data, function(index,value) {
$('.product['+filter+'="'+value+'"]').show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Category</p>
<div><input class="filter" filter="category" data="boeken" type="checkbox" />books</div>
<div><input class="filter" filter="category" data="spellen" type="checkbox" />games</div>
<div><input class="filter" filter="category" data="andere" type="checkbox" />other</div>
<p>Partners</p>
<div><input class="filter" filter="partner" data="amazon" type="checkbox" />amazon</div>
<div><input class="filter" filter="partner" data="ebay" type="checkbox" />ebay</div>
<div><input class="filter" filter="partner" data="amazon, ebay" type="checkbox" />amazon and ebay</div>
<br>
<div class="products">
<div class="product" category="boeken" partner="amazon" />Product 1</div>
<div class="product" category="spellen" partner="ebay" />Product 2</div>
<div class="product" category="andere" partner="ebay" />Product 3</div>
<div class="product" category="andere" partner="amazon" />Product 4</div>
</div>
这篇关于产品过滤器算法需要改进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
