jQuery同位素哈希历史：美化哈希URL

Question

我正在使用哈希历史Isotope。它效果很好，但我对URL的使用不满意 - 我想简化&清理它。

目前正在使用：

var href = $this.attr('href').replace(/^#/, ''); 
var option = $.deparam(href, true);` 

在此标记：

<li><a href="#filter=.work/">Work</a></li> 

所以，我的问题：我怎样才能使它与下面的标记工作？

<li><a href="#/work/">Work</a></li> 

我只使用过滤器，所有其他同位素选项都锁定了，所以我希望删除提及的过滤器。

在此先感谢！

Answer 1

我使用这个：

function getHashFilter() { 
    var hash = location.hash; 
    // get filter=filterName 
    var matches = location.hash.match(/^#?(.*)$/)[1]; // this is to get the name of the class 
    var hashFilter = matches; 
    return hashFilter; 

} 

$(function() { 
    var $container = $('. isotope'); 

    // bind filter button click 
    var $filters = $('#filters').on('click', 'span', function() { 
    var filterAttr = $(this).attr('data-filter'); 
    // set filter in hash 
    location.hash = '/' + filterAttr.substr(1); // adding the slash for the url 
    }); 

    var isIsotopeInit = false; 

    function onHashchange() { 
    var hashFilter = getHashFilter(); 
    if (!hashFilter && isIsotopeInit) { 
     return; 
    } 
    isIsotopeInit = true; 
    // filter isotope 
    $container.isotope({ 
     itemSelector: '.element-item', 
     filter: '.' + hashFilter.substr(1) //adding the . so it can match the data-filter 
    }); 
    // set selected class on button 
    if (hashFilter) { 
     $filters.find('.is-checked').removeClass('is-checked'); 
     $filters.find('[data-filter=".' + hashFilter + '"]').addClass('is-checked'); 
    } 
    } 

    $(window).on('hashchange', onHashchange); 
    // trigger event handler to init Isotope 
    onHashchange(); 
}); 

我意识到，*之后不会这方面的工作。所以你需要添加另一个类/数据过滤器来显示全部。