應用不同的複選框過濾器來顯示/隱藏div

Question

目前我的複選框過濾不起作用，它使所有grid-cell div被選中時消失。

我希望它顯示所有類別，如果沒有選擇或如果全部被選中。

如果選擇區域：顯示與北方相匹配的所有項目，如果選擇南方，則顯示所有與南方相匹配的項目，如果同時選擇了北方和南方，則顯示與北方或南方匹配的所有項目。

如果選擇高位，我也希望價格相同顯示高位，如果高位和低位選擇顯示高位和低位。

如果選擇的區域是南北價格是包含有data-category-type="high"或data-category-name="north"或data-category-name="south"

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

確定的3

例如，所以任何物品低秀項，嘗試這個。 已更新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(); 
}