Сброс изотопной фильтрации jQuery

Question

Я использую изотоп JQuery с комбинированным трехуровневым фильтром. Во всех примерах, с которыми я сталкивался, единственный способ "сбросить" фильтры - это нажать "Показать все".

Можно ли "отфильтровать" результаты, нажав на выбранный фильтр, чтобы отменить его выбор?

Вот пример: http://jsfiddle.net/RevConcept/suagb/

Вот мой код...

HTML

<div id="options" class="combo-filters">

                <div class="option-combo location">
                  <ul class="filter option-set group level-one" data-filter-group="location"> 
                    <li class="hidden"><a href="#filter-location-any" data-filter-value="" class="selected">any</a>

                      <li><a href="#filter-location-exterior" data-filter-value=".exterior" class="trigger-two">exterior</a>

                      <li><a href="#filter-location-interior" data-filter-value=".interior" class="trigger-two">interior</a>
                  </ul>
                </div>

                <div class="option-combo illumination">
                  <ul class="filter option-set group level-two" data-filter-group="illumination"> 
                    <li class="hidden"><a href="#filter-illumination-any" data-filter-value="" class="selected">any</a>

                      <li><a href="#filter-illumination-illuminated" data-filter-value=".illuminated" class="trigger-three">illuminated</a>

                      <li><a href="#filter-illumination-non-illuminated" data-filter-value=".non-illuminated" class="trigger-three">non-illuminated</a>

                  </ul>
                </div>

                <div class="option-combo mount">
                  <ul class="filter option-set group level-three" data-filter-group="mount"> 
                    <li class="hidden"><a href="#filter-mount-any" data-filter-value="" class="selected">any</a>

                      <li><a href="#filter-mount-wall" data-filter-value=".wall">wall</a>

                      <li><a href="#filter-mount-ground" data-filter-value=".ground">ground</a>

                  </ul>
                </div>


            </div><!--end options-->

CSS

header nav a {
color:#666666;
}

header nav a.selected {
color:#000000;
}

JAVASCRIPT

  $(function(){

var $container = $('#container'),
    filters = {};

$container.isotope({
  itemSelector : '.project',
  masonry: {
    columnWidth: 80
  }
});

// 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.location = 'exterior'
  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;
});

});

Answer 1

isoSelective обеспечивает объединение и переключение фильтров. Попробуйте использовать мою обновленную версию: https://github.com/simmerdesign/jquery-isoselective

Answer 2

Вы можете добавить кнопку "Обновить страницу"...

Вот 3 примера для вас...

<input type="button" value="Reload Page" onClick="window.location.href=window.location.href">

<input type="button" value="Reload Page" onClick="window.location.reload()">

<input type="button" value="Reload Page" onClick="history.go(0)">