同位素过滤器烧烤哈希答案

【问题标题】：Isotope Filter BBQ Hash同位素过滤器烧烤哈希
【发布时间】：2013-07-12 22:49:39
【问题描述】：

拼命尝试使用 BBQ Hash 设置 Isotope，但失败了。已经花时间进行演示：http://isotope.metafizzy.co/tests/combo-sort-history.html 仍然没有得到它。

我下面的代码目前正在过滤我的项目...只是无法获得哈希设置。我需要这个，所以我可以直接链接到我的过滤器链接之一。任何帮助都会很棒。无法将它集成到我已有的东西中，所以请记住这一点......

<script>
    var $container = $('.container');
    $(window).load(function() {
         $('.container').isotope({
            itemSelector : '.item',
            isFitWidth: true,
            // sortBy : 'random',
        });

        $('.filter a').click(function(){
          var selector = $(this).attr('data-filter');
          $container.isotope({ filter: selector });
          return false;
        });


    });

      $(window).load()
  </script>

【问题讨论】：

标签： jquery hash jquery-isotope

【解决方案1】：

我显然不被允许链接到 Isotope BBQ 网站，但如果你去 Isotopes 网站并选择 Hash History with Jquery BBQ，你可以看到我在下面发布的内容。

当我几天前尝试安装它时，我能够很快地让它工作。当然，第一步是包含 BBQ Hash jquery。

我更改了 URL 以更好地表示 HASH 请求。而不是使用：

<a href="#" data-filter=".television">

我用过：

<a href="#filter=.television">

为了帮助确定 fitler 类型，您可以使用 print 或 log$.param({ filter: ':not(.transition)' }) 告诉您它应该是什么样子。

然后我将它包含在 jQuery 中。这部分将替换您代码中的点击功能。

$('.filter 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, true );
  // set hash, triggers hashchange on window
  $.bbq.pushState( option );
  return false;
});

最后，这段代码是新的过滤器。我会将它放在 window.load 函数中，低于该函数中的所有内容。首先你要设置你的选项。

$(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');

通过将上面的代码替换为我在此处列出的代码并更改您的 <a> 过滤器列表，您应该可以让它正常工作。但是，我刚刚列出了同位素中包含的内容，因为它对我有用！如果您遇到问题，请告诉我。

【讨论】：