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(); 
}); 

我意識到，*之後不會這方面的工作。所以你需要添加另一個類/數據過濾器來顯示全部。