jQuery BBQ的jQuery同位素哈希歷史記錄

Question

我正在使用同位素進行過濾，這很棒。 當用戶單擊其中一張圖像時，它會顯示不同的頁面（詳細頁面），但是用於過濾其圖像的菜單仍然存在。 現在我想要的是，當用戶再次單擊一種可能性時，他返回主頁，但已經有了過濾結果。

我已經閱讀了此頁面（ http://isotope.metafizzy.co/docs/hash-history-jquery-bbq.html ），但我承認我不了解很多事情

我建議使用以下HTML代碼：

div id="leftMenu">

            <span><a href="#filter=*" >All Menus</a></span>
            <span><a href="#filter=.pizza" >Pizza </a></span>
            <span><a href="#filter=.soda" >Soda </a></span>
            <span><a href="#filter=.popcorn" >PopCorn</a></span>
            <span><a href="#filter=.beer" >Beer</a></span>
         </div> 

和后續的Js代碼

$('#leftMenu span a').click(function() {
        // get href attr, remove leading #
        var href = $(this).attr('href').replace(/^#/, ''),
        // convert href into object
        // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
        option = $.deparam(href);
        // set hash, triggers hashchange on window
        console.log('value de href: '+href+ ' || option: '+option);
        $.bbq.pushState(recursiveDecoded);

        return false;
    }); 

但是我在depram函數上出錯了。 它告訴我$ .depram不是函數

我是否必須鏈接其他文件才能讀取depram方法？

誰能幫助我完成或理解我的？？

非常感謝

編輯-我的進度我發現了兩個額外的js文件，我將我的項目鏈接到它們，並使用以下代碼

$('#leftMenu span a').click(function() {
        // get href attr, remove leading #
        var href = $(this).attr('href').replace(/^#/, ''),
        // convert href into object
        // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
        option = $.deparam(href);
        // set hash, triggers hashchange on window
        $.bbq.pushState(option);
        console.log("--> " +option );
        //return false;
    });     


$(window).bind('hashchange', function(event) {
    alert('Hello');
    // get options object from hash
    var hashOptions = $.deparam.fragment();
    console.log(hashOptions);
    // apply options from hash
    $('#leftMenu span a').isotope(hashOptions);
})
// trigger hashchange to capture any hash data on init
.trigger('hashchange');

我沒有任何錯誤。 但是它不是過濾器。

我可以收到警報（“ Hello”）。

有任何想法嗎？？

Answer 1

我找到了解決方案。 我的js代碼有錯誤。

這是代碼

$container.isotope({});


    $('#leftMenu span a').click(function() {
        // get href attr, remove leading #
        var href = $(this).attr('href').replace(/^#/, ''),
        // convert href into object
        // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
        option = $.deparam(href);
        // set hash, triggers hashchange on window
        $.bbq.pushState(option);
        return false;
    }); 



    $(window).bind('hashchange', function(event) {
        // get options object from hash
        var hashOptions = $.deparam.fragment();
        // apply options from hash
         $container.isotope(hashOptions);
    })
    // trigger hashchange to capture any hash data on init
    .trigger('hashchange'); 

我強調$container.isotope(hashOptions); 是指菜單項，但實際上是指結果容器。