1
いくつかのドロップダウン/選択ボックスにすばらしいMixItUpコードを実装しました。私は上級チュートリアルに続いて試してみましたが、両方のロジックを使用するためのチェックボックスはチェックボックスを使用しています。選択ボックスでそれを動作させる方法を理解することはできません。また、ORロジックを必要とする選択ボックスのグループが1つだけあり、残りのすべてにANDが必要です。次のようにドロップダウンとMixItUpの両方で 'and'と 'or'ロジックを使用する
ロジックは次のとおり
学校被写体と最小グレードおよび最大グレード AND（第一言語または第二言語）。 （注意：これはWordPressのサイトですので、私は代わりに$はjQueryを使用）：
<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は、次のように
フィルタコントロールがある
<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>