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

您可以添加一个 “刷新页面” 按钮...

这里有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)">

Answer 2

iso选择性提供组合和切换过滤器。尝试使用我的更新版本：https://github.com/simmerdesign/jquery-isoselective