javascript - applying different checkbox filters to show/hide divs -
currently checkbox filtering not working, making grid-cell
div's dissapear when selected.
i show categories if nothing select or if selected.
if area: north selected show items matching north, if south selected show items matching south , if both north , south selected show items matching either north or south.
i same price if high selected show high , if both high , low selected show high , low.
if area selected north , south , price low show items containing 3
e.g items has data-category-type="high"
or data-category-name="north"
or 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) { // 1 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 checked $('.grid-cell').show(); } });
ok, try this. updated jsfiddle mistake had high set 4 cells.
$('.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 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(); }
Comments
Post a Comment