Question

目前我的复选框过滤无法正常工作，选择时会使所有grid-cell div消失。

我希望它显示所有类别，如果没有选择或是否所有选择。

如果选择area：north，则显示所有匹配北的项目，如果选择南，则显示所有匹配南的项目，如果选择南北，则显示所有匹配北或南的项目。

如果选择高电平显示高电平且选择高电平和低电平显示高电平和低电平，我也希望价格相同。

如果选择的区域是北方和南方且价格低，则显示包含这3个区域的项目

例如，任何包含data-category-type="high"或data-category-name="north"或data-category-name="south"

的项目

$('.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();
}

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

1 个答案: