jQuery Isotope 해쉬 - 히스토리 : 해쉬 -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(); 
}); 

내가 *이 후 작동하지 않습니다 것을 깨달았다. 따라서 모든 클래스를 표시하려면 다른 클래스/데이터 필터를 추가해야합니다.