javascript - 应用不同的复选框过滤器来显示/隐藏 div

Question

目前我的复选框过滤不起作用，它使所有 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();
}
});

Answer 1

好的，试试这个。更新 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();
}