jQuery BBQ 的 jQuery 同位素哈希历史答案

【问题标题】：jquery isotope Hash history with jQuery BBQjQuery BBQ 的 jQuery 同位素哈希历史
【发布时间】：2012-09-10 02:55:40
【问题描述】：

我正在使用isotope 进行过滤，这很棒。当用户单击其中一个图像时，它会显示一个不同的页面（详细信息页面），但用于过滤的菜单仍然存在。现在我想要的是，当用户再次点击其中一种可能性时，他会返回主页，但已经获得了过滤结果。

我已经阅读了这个页面 (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'）。

有什么想法吗？？

【问题讨论】：

标签： jquery jquery-isotope

【解决方案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); 指的是菜单项，但实际上它指的是结果容器。

【讨论】：