Как применить кнопку сброса только к каждому выбору вместо всех параметров фильтрации в Mixitup?
Вот мой код: http://codepen.io/kikibres/pen/mVYOaR
Я пытаюсь перекодировать опции выбора, чтобы отобразить кнопку "X", когда она выбрана, и когда один щелчок по кнопке "X", она возвращается к исходному значению выбора. Кроме того, я хотел, чтобы кнопка "х" работала только в своих выпадающих меню, а не во всех выпадающих меню.
Я пытаюсь сделать его более похожим на http://www.mtommaneycentre.com.au/stores/. Как вы можете видеть, когда вы нажимаете на опцию в поле выбора "AZ", появляется кнопка "X", а когда вы нажимаете на кнопку "X", она сбрасывает исходную опцию выбора "AZ"….
Как это сделать?
HTML
<div class="filtermenu">
<form class="controls" id="Filters">
<fieldset class="select-style">
<select>
<option value="">All</option>
<option value=".triangle">Triangle</option>
<option value=".square">Square</option>
<option value=".circle">Circle</option>
</select>
<button class="btn-clear">x</button>
</fieldset>
<fieldset class="select-style">
<select>
<option value="">All</option>
<option value=".blue">Blue</option>
<option value=".white">White</option>
<option value=".green">Green</option>
</select>
<button class="btn-clear">x</button>
</fieldset>
<fieldset>
<button class="filter" data-filter=".triangle">Triangle</button>
</fieldset>
<fieldset>
<input type="text" placeholder="Enter Name" val="" data-filter="" id="filter--text" />
</fieldset>
<button id="Reset">Clear Filters</button>
</form>
</div>
Javascript код, который сбрасывает все параметры
self.$reset.on('click', function(e){ e.preventDefault();
в
var dropdownFilter = {
// 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 "dropdownFilter" 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(){
var $this = $(this);
self.groups.push({
$buttons : $this.find('.filter'),
$inputsSelect : $this.find('select'),
$inputsText : $this.find('input[type="text"]'),
active : ''
});
});
self.bindHandlers();
},
// The "bindHandlers" method will listen for whenever a select is changed.
bindHandlers: function(){
var self = this;
// Handle select change
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');
self.parseFilters();
});
// Handle dropdown change
self.$filters.on('change', function(){
self.parseFilters();
});
// Handle key up on inputs
self.$filters.on('keyup', 'input[type="text"]', function() {
var $input = $(this);
console.log($input.val());
$input.attr('data-filter', '[class*="'+$input.val().replace(/ /, '-')+'"]');
if ($input.val() == '')
$input.attr('data-filter', '');
console.log($input.attr('data-filter'));
self.parseFilters();
});
// Handle reset click
self.$reset.on('click', function(e){
e.preventDefault();
self.$filters.find('.filter').removeClass('active');
self.$filters.find('.show-all').addClass('active');
self.$filters.find('select').val('');
self.$filters.find('input[type="text"]').val('').attr('data-filter', '');
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++){
var activeButtons = group.$buttons.length ? group.$buttons.filter('.active').attr('data-filter') || '' : '';
var activeSelect = group.$inputsSelect.length ? group.$inputsSelect.val() || '' : '';
var activeText = group.$inputsText.length ? group.$inputsText.attr('data-filter') : '';
group.active = activeButtons+activeSelect+activeText;
console.log(group.active);
}
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 dropdownFilter code
dropdownFilter.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.');
}
}
});
});
1 ответ
На данный момент к кнопкам "x" не прикреплен какой-либо обработчик событий, поэтому, если вы нажмете на них, он просто обновит страницу, поэтому сбрасывает все фильтры, потому что переинициализирует весь код.
Вы должны добавить этот код в свой плагин
$('.btn-clear').on('click', function(event) {
event.preventDefault();
$(this).prev().val("").change();
});
event.preventDefault()
будет препятствовать запуску события по умолчанию при нажатии на кнопку, которая должна обновить страницу в этом случае.
Следующая строка будет указывать на предыдущий элемент DOM выбранного элемента (который является <select>
) и изменяется на параметр, который имеет значение: "", и после этого вызывает событие change(), сообщающее вашему письменному коду об изменении значения выбора, поэтому он должен перезагрузить рисунки с новыми фильтрами.
Я сохранил его здесь: http://codepen.io/anon/pen/EPzWEQ?editors=1010 Конечно, вы должны внедрить его в свой плагин, я просто написал его в нижней части кода, чтобы он работал.
РЕДАКТИРОВАТЬ: Если вы хотите сделать невидимыми кнопки X, если не выбран фильтр, просто сделайте обработчик события 'change' в выделенном элементе и проверьте, имеет ли значение значение "", затем скройте кнопку, иначе покажите ее. Это должно выглядеть так:
$('select').change(function() {
if ($(this).val() == "") {
$(this).next().hide();
} else {
$(this).next().show();
}
});