0
我已经从http://codepen.io/patrickkunka/pen/iwcap采取了代码并对其进行了修改，但是我无法按预期工作。Mixitup.js和多个筛选
如果我只选择一个过滤器，它工作正常 - 但如果我开始比较我的过滤器，它不会返回正确的结果。
我正在动态返回“过滤器” - 但这不应该是问题。
任何人都可以给我一些这方面的意见吗？
链接，JS小提琴：
http://jsfiddle.net/u6ksLwts/26/
// Loop through all div's with .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'));
// Fix invalid css class names
});
// Now return the arrays to 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 = "";
for (var i 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>';
}
return 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;
for (var i = prices.length - 1; i >= 0; i--) {
tmp = prices[i];
if (tmp < lowest) lowest = tmp;
if (tmp > highest) highest = tmp;
}
console.log(highest, lowest);
}
// MIX IT UP CODE
// To keep our code clean and modular, all custom functionality will be contained inside a single object literal called "checkboxFilter".
var checkboxFilter = {
// Declare any variables we will need as properties of the object
$filters: null,
$reset: null,
groups: [],
outputArray: [],
outputString: '',
// The "init" method will run on document ready and cache any jQuery objects we will need.
init: function() {
var self = this; // As a best practice, in each method we will asign "this" to the variable "self" so that it remains scope-agnostic. We will use it to refer to the parent "checkboxFilter" object so that we can share methods and properties between all parts of the 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();
},
// The "bindHandlers" method will listen for whenever a 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();
});
},
// The parseFilters method checks which filters are active in each group:
parseFilters: function() {
var self = this;
// loop through each filter group and add active filters to arrays
for (var i = 0, group; group = 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();
},
// The "concatenate" method will crawl through each group, concatenating filters as desired:
concatenate: function() {
var self = this,
cache = '',
crawled = false,
checkTrackers = function() {
console.log(1);
var done = 0;
for (var i = 0, group; group = self.groups[i]; i++) {
(group.tracker === false) && done++;
}
return (done < self.groups.length);
},
crawl = function() {
// console.log(2);
for (var i = 0, group; group = 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);
for (var i = self.groups.length - 1; i > -1; i--) {
var group = 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
do {
crawl();
}
while (!crawled && checkTrackers());
self.outputString = self.outputArray.join();
// If the output string is empty, show all rather than none:
!self.outputString.length && (self.outputString = 'all');
//console.log(self.outputString);
//^we can check the console here to take a look at the filter string that is produced
// Send the output string to MixItUp via the '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() {
// To avoid non javascript browsers not to see the content, the display:none will first be set
// here, instead of the 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 // we won't be 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>