I have a number of jQuery isotope filters and a sort . All works really nicely, but I would like to create a reset button .
I have tried the following (stackoverflow: reset all combination filters ), but while it does seem to reset the items (on the second click), it does not reset the filter buttons.
I can only assume you mean "it does not reset the appearance of the filter buttons" when writing
[…] it does not reset the filter buttons.
If that is the case, and the appearance of your filter-buttons is controlled by CSS-classes just like in Isotope's examples, you simply have to remove said CSS-class(es) from the filter button elements when a user clicks the "reset"-button.
In the source of eg Isotope's 'Combination filters'-demonstration you'll find the following code which handles everything happening when one of the filter-buttons is clicked:
// filter buttons
$('.filter a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return;
}
var $optionSet = $this.parents('.option-set');
// change selected class
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// store filter value in object
// i.e. filters.color = 'red'
var group = $optionSet.attr('data-filter-group');
filters[ group ] = $this.attr('data-filter-value');
// convert object into array
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$container.isotope({ filter: selector });
return false;
});
The important code (hopefully) related to your question can be found in these lines:
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.