我已经成功地为一些下拉菜单/选择框实现了神话般的MixItUp代码。我尝试过使用高级教程但是使用两种逻辑的教程都使用了复选框，而我无法弄清楚如何使其适用于选择框。此外，只有一组选择框需要OR逻辑，其余所有需要AND。
逻辑如下：
学校科目及最低年级和最高年级 AND（第一语言或第二语言）。
过滤器控件如下：
<form class="controls form-horizontal" id=Filters>
<fieldset class=MixItUpfilters>
<legend>Filters</legend>
<div class=form-group>
<label for=selectSubject class="col-md-3 control-label">with the school subject of</label>
<div class=col-md-9>
<fieldset>
<select id=selectSubject class="form-control input-sm">
<option value="">-- select a school subject --</option>
<option value=".subject-1">Subject 1</option>
<option value=".subject-2">Subject 2</option>
<option value=".subject-3">Subject 3</option>
</select>
</fieldset>
</div>
</div>
<div class=form-group>
<label for=selectMinGrade class="col-md-3 control-label">for grades </label>
<div class=col-md-9>
<fieldset class=inline>
<select id=selectMinGrade class="form-control input-sm">
<option value="">-- select a minimum grade --</option>
<option value=".min-grade-01">Grade 1</option>
<option value=".min-grade-02">Grade 2</option>
<option value=".min-grade-03">Grade 3</option>
</select>
</fieldset>
<label>to </label>
<fieldset class=inline>
<select id=selectMaxGrade class="form-control input-sm">
<option value="">-- select a maximum grade --</option>
<option value=".max-grade-01">Grade 1</option>
<option value=".max-grade-02">Grade 2</option>
<option value=".max-grade-03">Grade 3</option>
</select>
</fieldset>
</div>
</div>
<div class=form-group>
<label for=selectFirstLanguage class="col-md-3 control-label">in First language</label>
<div class=col-md-9>
<fieldset class=inline>
<select id=selectFirstLanguage class="form-control input-sm">
<option value="">-- select a language --</option>
<option value=".first-language-english">English</option>
<option value=".first-language-afrikaans">Afrikaans</option>
<option value=".first-language-zulu">Zulu</option>
</select>
</fieldset>
<label>or second language</label>
<fieldset class=inline>
<select id=selectSecondLanguage class="form-control input-sm">
<option value="">-- select a language --</option>
<option value=".second-language-english">English</option>
<option value=".second-language-afrikaans">Afrikaans</option>
<option value=".second-language-zulu">Zulu</option>
</select>
</fieldset>
</div>
</div>
</fieldset>
</form>
javascript是（注意：我使用jQuery代替$，因为这是一个WordPress网站）：
<script>
// To keep our code clean and modular, all custom functionality will be contained inside a single object literal called "dropdownFilter".
var dropdownFilter = {
// Declare any variables we will need as properties of the object
jQueryfilters: null,
jQueryreset: 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 assign "this" to the variable "self"
so that it remains scope-agnostic. We will use it to refer to the parent "dropdownFilter"
object so that we can share methods and properties between all parts of the object.
*/
self.jQueryfilters = jQuery('#Filters');
self.jQueryreset = jQuery('#Reset');
self.jQuerycontainer = jQuery('#Container');
self.jQueryfilters.find('fieldset').each(function(){
self.groups.push({
jQuerydropdown: jQuery(this).find('select'),
active: ''
});
});
self.bindHandlers();
},
// The "bindHandlers" method will listen for whenever a select is changed.
bindHandlers: function(){
var self = this;
// Handle select change
self.jQueryfilters.on('change', 'select', function(e){
e.preventDefault();
self.parseFilters();
});
// Handle reset click
self.jQueryreset.on('click', function(e){
e.preventDefault();
self.jQueryfilters.find('select').val('');
self.parseFilters();
});
},
// The parseFilters method pulls the value of each active select option
parseFilters: function(){
var self = this;
// loop through each filter group and grap the value from each one.
for(var i = 0, group; group = self.groups[i]; i++){
group.active = group.jQuerydropdown.val();
}
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.jQuerycontainer.mixItUp('isLoaded')){
self.jQuerycontainer.mixItUp('filter', self.outputString);
}
}
};
// On document ready, initialise our code.
jQuery(function(){
// Initialize dropdownFilter code
dropdownFilter.init();
// Instantiate MixItUp
jQuery('#Container').mixItUp({
controls: {
enable: false // as we are interacting via the API, we can disable default controls to increase performance
},
callbacks: {
onMixFail: function(){
console.log('No items were found matching the selected filters.');
}
},
layout: {
containerClassFail: 'none-found'
}
});
});
</script>
答案 0 :(得分：1)
从mixitup documentation开始，似乎没有“复杂”逻辑的配置机制。你可以把'和'或'或'一起放在一起。但是，文档至少告诉我们使用此逻辑的语法，该逻辑基本上是CSS选择器语法，即.class1.class2是class1 AND class2而.class1, .class2是class1 OR class2。如果不能使用配置对象，则必须编写自己的连接方法，如下所示
concatenate: function(){
var self = this;
self.outputString = ''; // Reset output string
var anded = self.groups[0].active+self.groups[1].active+self.groups[2].active
self.outputString = anded+self.groups[3].active+', '+anded+self.groups[4].active
// outputString will now look like
// subject.min-grade.max-grade.first-language, subject.min-grade.max-grade.second-language
// If the output string is empty, show all rather than none:
!self.outputString.length && (self.outputString = 'all');
console.log(self.outputString);
// Send the output string to MixItUp via the 'filter' method:
if(self.jQuerycontainer.mixItUp('isLoaded')){
self.jQuerycontainer.mixItUp('filter', self.outputString);
}
}
这假设您的组订单与您在代码上方提到的逻辑字符串相匹配，其中第一个选择是主题，第二个是最低等级等。