我看到this教程，它几乎正是我所需要的，但我不想要一个复选框，我想要按钮过滤器。 我尝试使用this教程，但我找不到任何方法来组合这两个脚本。
这是html：
<form class="controls" id="Filters">
<!-- We can add an unlimited number of "filter groups" using the following format: -->
<fieldset>
<h4>Shapes</h4>
<button class="filter" data-filter=".triangle">Triangle</button>
<button class="filter" data-filter=".square">Square</button>
<button class="filter" data-filter=".circle">Circle</button>
</fieldset>
<fieldset>
<h4>Colours</h4>
<button class="filter" data-filter=".green">Green</button>
<button class="filter" data-filter=".blue">Blue</button>
<button class="filter" data-filter=".white">White</button>
</fieldset>
<button id="Reset">Clear Filters</button>
</form>
<div id="Container" class="container">
<div class="mix triangle white"></div>
<div class="mix square white"></div>
<div class="mix circle green"></div>
<div class="mix triangle blue"></div>
<div class="mix square white"></div>
<div class="mix circle blue"></div>
<div class="mix triangle green"></div>
<div class="mix square blue"></div>
<div class="mix circle white"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
</div>
这是javascript（我认为解析过滤器功能需要被黑客攻击。 脚本
group.$buttons.filter('.active').attr('data-filter')
仅返回第一个属性，而不是所有活动属性
// To keep our code clean and modular, all custom functionality will be contained inside a single object literal called "buttonFilter".
var buttonFilter = {
// 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 "buttonFilter" 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('fieldset').each(function(){
self.groups.push({
$buttons: $(this).find('.filter'),
active: ''
});
});
self.bindHandlers();
},
// The "bindHandlers" method will listen for whenever a button is clicked.
bindHandlers: function(){
var self = this;
// Handle filter clicks
self.$filters.on('click', '.filter', function(e){
e.preventDefault();
var $button = $(this);
// If the button is active, remove the active class, else make active and deactivate others.
// $button.hasClass('active') ?
// $button.removeClass('active') :
// $button.addClass('active').siblings('.filter').removeClass('active');
// If the button is active, remove the active class, else make active and deactivate others.
if ($button.hasClass('active')) { $button.removeClass('active')} else {$button.addClass('active')}
self.parseFilters();
});
// Handle reset click
self.$reset.on('click', function(e){
e.preventDefault();
self.$filters.find('.filter').removeClass('active');
self.parseFilters();
});
},
// The parseFilters method checks which filters are active in each group:
parseFilters: function(){
var self = this;
// loop through each filter group and grap the active filter from each one.
for(var i = 0, group; group = self.groups[i]; i++){
group.active = group.$buttons.filter('.active').attr('data-filter') || '';
}
self.concatenate();
},
// The "concatenate" method will crawl through each group, concatenating filters as desired:
concatenate: function(){
var self = this;
self.outputString = ''; // Reset output string
for(var i = 0, group; group = self.groups[i]; i++){
self.outputString += group.active;
}
// 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')){
self.$container.mixItUp('filter', self.outputString);
}
}
};
// On document ready, initialise our code.
$(function(){
// Initialize buttonFilter code
buttonFilter.init();
// Instantiate MixItUp
$('#Container').mixItUp({
controls: {
enable: false // we won't be needing these
},
callbacks: {
onMixFail: function(){
alert('No items were found matching the selected filters.');
}
}
});
});
有什么想法吗？
THKS
答案 0 :(得分：0)
我找到了解决方案：
// To keep our code clean and modular, all custom functionality will be contained inside a single object literal called "buttonFilter".
var buttonFilter = {
// 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 "buttonFilter" 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('fieldset').each(function(){
self.groups.push({
$buttons: $(this).find('.filter'),
active: ''
});
});
self.bindHandlers();
},
// The "bindHandlers" method will listen for whenever a button is clicked.
bindHandlers: function(){
var self = this;
// Handle filter clicks
self.$filters.on('click', '.filter', function(e){
e.preventDefault();
var $button = $(this);
// If the button is active, remove the active class, else make active and deactivate others.
if ($button.hasClass('active')) { $button.removeClass('active')} else {$button.addClass('active')}
self.parseFilters();
});
// Handle reset click
self.$reset.on('click', function(e){
e.preventDefault();
self.$filters.find('.filter').removeClass('active');
self.parseFilters();
});
},
// The parseFilters method checks which filters are active in each group:
parseFilters: function(){
window.console && console.log('PARSEFILTER');
var self = this;
window.console && console.log(self);
// 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.$buttons.each(function(){
// ici je dois sortir les active
window.console && console.log('dans each');
window.console && console.log($(this).hasClass('active'));
window.console && console.log($(this).attr('data-filter'));
$(this).hasClass('active') && group.active.push($(this).attr('data-filter'));
});
group.active.length && (group.tracker = 0);
}
self.concatenate();
},
// The "concatenate" method will crawl through each group, concatenating filters as desired:
concatenate: function(){
var self = this,
cache = '',
crawled = false,
checkTrackers = function(){
var done = 0;
for(var i = 0, group; group = self.groups[i]; i++){
(group.tracker === false) && done++;
}
return (done < self.groups.length);
},
crawl = function(){
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(){
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')){
self.$container.mixItUp('filter', self.outputString);
}
}
};
// On document ready, initialise our code.
$(function(){
// Initialize buttonFilter code
buttonFilter.init();
// Instantiate MixItUp
$('#Container').mixItUp({
controls: {
enable: false // we won't be needing these
},
callbacks: {
onMixFail: function(){
alert('No items were found matching the selected filters.');
}
}
});
});