目前我的复选框过滤不起作用,它使所有 grid-cell
div 在被选中时消失。
我希望它在没有选择或全部选择时显示所有类别。
如果选择区域:北部,则显示与北部匹配的所有元素;如果选择南部,则显示与南部匹配的所有元素;如果同时选择北部和南部,则显示与北部或南部匹配的所有元素。
如果选择高显示高,如果选择高和低显示高和低,我也希望价格相同。
如果选择的区域是北方和南方并且价格低显示包含这 3 个的元素
例如,任何具有 data-category-type="high"
或 data-category-name="north"
或 data-category- name="南"
http://jsfiddle.net/yzyyqqey/3/
$('.checkbox').on('click', function (e) {
var $this = $(this),
$links = $('.checkbox');
if ($this.hasClass('selected')) {
$this.removeClass('selected');
} else {
$this.addClass('selected');
}
$('.grid-cell').hide();
if ($(".checkbox:checked").length > 0) {
// any one is checked
$.each($links, function (k, v) {
$this = $(v);
if ($this.hasClass('selected')) {
anySelectedCheckbox = true;
var cat = $this.data('categoryType');
var nam = $this.data('categoryName');
$('.grid-cell:has(div[data-category-type="' + cat + '"],div[data-category-name="' +nam+' "] )').show();
}
});
} else {
// none is checked
$('.grid-cell').show();
}
});
最佳答案
好的,试试这个。 更新 jsFiddle 另一个错误是您为所有 4 个单元格设置了高值。
$('.checkbox').on('click', function (e) {
var $this = $(this),
$links = $('.checkbox');
if ($this.hasClass('selected')) {
$this.removeClass('selected');
} else {
$this.addClass('selected');
}
$('.grid-cell').hide();
if ($(".checkbox:checked").length > 0) {
ApplyAllFilters();
} else {
// none is checked
$('.grid-cell').show();
}
});
function ApplyAllFilters()
{
var selectedPricesFilterQry = $(".checkbox.priceFilter:checked").map(function() {
return '[data-category-type=' + $(this).data('categoryType') + ']';
}).get()+''
var selectedAreasFilterQry = $(".checkbox.areaFilter:checked").map(function() {
return '[data-category-name=' + $(this).data('categoryName') + ']';
}).get()+''
var filteredResults = {};
if(selectedPricesFilterQry != '')
filteredResults = $('.grid-cell').filter(selectedPricesFilterQry);
else
filteredResults = $('.grid-cell');
if(selectedAreasFilterQry != '')
filteredResults = $(filteredResults).filter(selectedAreasFilterQry);
$(filteredResults).show();
}
关于javascript - 应用不同的复选框过滤器来显示/隐藏 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30824327/