javascript - Mixitup.js and multiple filtering -

javascript - Mixitup.js and multiple filtering -

i've taken code http://codepen.io/patrickkunka/pen/iwcap , modified it, can't create work desired.

if select 1 filter, works fine - if start compare filters, it's not returning right result.

i'm returning "filters" dynamicly - shouldn't problem.

can give me heads on this?

link js fiddle :

http://jsfiddle.net/u6kslwts/26/

// loop through div's .mix class var genders = []; var models = []; var brands = []; var prices = []; $(".mix").each(function () { addtoarrayifnew(genders, $(this).attr('data-gender')); addtoarrayifnew(models, $(this).data('model')); addtoarrayifnew(brands, $(this).data('brand')); if ($(this).data('brand').match(/\s/g)){ $(this).addclass('brand_' + $(this).data('brand')); } addtoarrayifnew(prices, $(this).data('price')); // prepare invalid css class names }); // homecoming arrays html code if (models.length > 0) { var filtername = 'model'; var idname = 'modelsfilter'; $("#" + idname).append(renderhtmlfilterboxes(filtername, models)); } if (genders.length > 0) { var filtername = 'gender'; var idname = 'gendersfilter'; $("#" + idname).append(renderhtmlfilterboxes(filtername, genders)); } if (brands.length > 0) { var filtername = 'brand'; var idname = 'brandsfilter'; $("#" + idname).append(renderhtmlfilterboxes(filtername, brands)); } function renderhtmlfilterboxes(filtername, arraylist) { var htmlstr = ""; (var in arraylist) { htmlstr = htmlstr + '<div class="filterboxes"><div class="checkbox">'; htmlstr = htmlstr + '<input type="checkbox" value=".' + filtername + '_' + arraylist[i].replace(/[^a-za-z]+/g,'') + '" />'; htmlstr = htmlstr + '<label>' + arraylist[i] + '</label>'; htmlstr = htmlstr + '</div></div>'; } homecoming htmlstr; } function addtoarrayifnew(arr, item) { if (item && jquery.inarray(item, arr) == -1) { arr.push(item); } } function renderhtmlpricerange() { var lowest = number.positive_infinity; var highest = number.negative_infinity; var tmp; (var = prices.length - 1; >= 0; i--) { tmp = prices[i]; if (tmp < lowest) lowest = tmp; if (tmp > highest) highest = tmp; } console.log(highest, lowest); } // mix code // maintain our code clean , modular, custom functionality contained within single object literal called "checkboxfilter". var checkboxfilter = { // declare variables need properties of object $filters: null, $reset: null, groups: [], outputarray: [], outputstring: '', // "init" method run on document ready , cache jquery objects need. init: function () { var self = this; // best practice, in each method asign "this" variable "self" remains scope-agnostic. utilize refer parent "checkboxfilter" object can share methods , properties between parts of object. self.$filters = $('#filters'); self.$reset = $('#reset'); self.$container = $('#container'); self.$filters.find('.filterboxes').each(function () { self.groups.push({ $inputs: $(this).find('input'), active: [], tracker: false }); }); // console.log(self.groups); self.bindhandlers(); }, // "bindhandlers" method hear whenever form value changes. bindhandlers: function () { var self = this; self.$filters.on('change', function () { self.parsefilters(); }); self.$reset.on('click', function (e) { e.preventdefault(); self.$filters[0].reset(); self.parsefilters(); }); }, // parsefilters method checks filters active in each group: parsefilters: function () { var self = this; // loop through each filter grouping , add together active filters arrays (var = 0, group; grouping = self.groups[i]; i++) { group.active = []; // reset arrays group.$inputs.each(function () { $(this).is(':checked') && group.active.push(this.value); }); group.active.length && (group.tracker = 0); } // console.log(self.groups); self.concatenate(); }, // "concatenate" method crawl through each group, concatenating filters desired: concatenate: function () { var self = this, cache = '', crawled = false, checktrackers = function () { console.log(1); var done = 0; (var = 0, group; grouping = self.groups[i]; i++) { (group.tracker === false) && done++; } homecoming (done < self.groups.length); }, crawl = function () { // console.log(2); (var = 0, group; grouping = self.groups[i]; i++) { group.active[group.tracker] && (cache += group.active[group.tracker]); if (i === self.groups.length - 1) { self.outputarray.push(cache); cache = ''; updatetrackers(); } } }, updatetrackers = function () { //console.log(3); (var = self.groups.length - 1; > -1; i--) { var grouping = self.groups[i]; if (group.active[group.tracker + 1]) { group.tracker++; break; } else if (i > 0) { group.tracker && (group.tracker = 0); } else { crawled = true; } } }; self.outputarray = []; // reset output array { crawl(); } while (!crawled && checktrackers()); self.outputstring = self.outputarray.join(); // if output string empty, show rather none: !self.outputstring.length && (self.outputstring = 'all'); //console.log(self.outputstring); // ^ can check console here take @ filter string produced // send output string mixitup via 'filter' method: if (self.$container.mixitup('isloaded')) { // console.log(4); self.$container.mixitup('filter', self.outputstring); // console.log(self.outputstring); } } }; // on document ready, initialise our code. $(function () { // avoid non javascript browsers not see content, display:none first set // here, instead of css file // initialize checkboxfilter code checkboxfilter.init(); // instantiate mixitup $(".mix").css("display", "none"); $('#container').mixitup({ load: { filter: 'none' }, controls: { togglelogic: 'or', togglefilterbuttons: true, enable: true // won't needing these }, animation: { easing: 'cubic-bezier(0.86, 0, 0.07, 1)', duration: 600 } }); });

html :

<div id="filters"> <div id="gendersfilter"></div> <div id="brandsfilter"></div> <div id="modelsfilter"></div> </div> <div id="container"> <div class="mix brand_mystbrandname model_ gender_0" data-gender="0" data-brand="my 1st. brand name!" data-model="" data-price="1000">my 1st. brand name!</div> <div class="mix brand_casio model_ gender_0" data-gender="0" data-brand="casio" data-model="" data-price="10">my casio block</div> <div class="mix brand_seiko model_ gender_2" data-gender="2" data-brand="seiko" data-model="precision" data-price="200">my seiko block</div> <div class="mix brand_nikon model_lada gender_1" data-gender="1" data-brand="nikon" data-model="lada" data-price="40">my nikon block</div> <div class="mix brand_dell model_2 gender_inspirion" data-gender="1" data-brand="dell" data-model="inspirion" data-price="500">my dell block</div> </div> <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>

self.$filters.find('.filterboxes').each(function () { self.groups.push({ $inputs: $(this).find('input'), active: [], tracker: false }); });

changed to

> self.$filters.find('.filters').each(function () { > self.groups.push({ > $inputs: $(this).find('input'), > active: [], > tracker: false > }); > });

and added css class "filters" on each of groups

<div id="filters"> <div id="gendersfilter" class="filters"></div> ... </div>

javascript jquery