将 'and' 和 'or' 逻辑与下拉菜单和 MixItUp 结合使用
Using both 'and' and 'or' logic with dropdowns and MixItUp
我已经成功地为一些 dropdowns/select 盒子实现了美妙的 MixItUp 代码。我已经尝试按照高级教程进行操作，但是同时使用这两种逻辑的教程使用了复选框，我无法弄清楚如何使其适用于 select 框。此外，只有一组 select 框需要 OR 逻辑，其余所有框都需要 AND。
逻辑如下：
学校科目 AND 最低成绩 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>
从 mixitup documentation 看来，'complicated' 逻辑似乎没有配置机制。您可以 'and' 或 'or' 将所有内容放在一起。但是，文档至少告诉我们使用此逻辑的语法，本质上是 CSS select 或语法，即 .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);
}
}
这假设您的团体订单与您在代码上方提到的逻辑字符串相匹配，其中第一个 select 是主题，第二个最低成绩等。
我已经成功地为一些 dropdowns/select 盒子实现了美妙的 MixItUp 代码。我已经尝试按照高级教程进行操作，但是同时使用这两种逻辑的教程使用了复选框，我无法弄清楚如何使其适用于 select 框。此外，只有一组 select 框需要 OR 逻辑，其余所有框都需要 AND。
逻辑如下：
学校科目 AND 最低成绩 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>
从 mixitup documentation 看来，'complicated' 逻辑似乎没有配置机制。您可以 'and' 或 'or' 将所有内容放在一起。但是，文档至少告诉我们使用此逻辑的语法，本质上是 CSS select 或语法，即 .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);
}
}
这假设您的团体订单与您在代码上方提到的逻辑字符串相匹配，其中第一个 select 是主题，第二个最低成绩等。