Question

拼命想要用烧烤哈希设置同位素并失败。已经花了一些时间使用演示：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>

Answer 1

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

几天前，当我尝试安装它时，我能够很快地将它安装好。当然，第一步是包括BBQ Hash jquery。

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

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

我用过：

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

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

然后我把它包含在jQuery中。这部分将替换代码中的click函数。

$('.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>过滤器列表，您应该可以使其工作没有问题。然而，我已经列出了同位素中包含的内容，因为它对我有效！如果您遇到麻烦，请告诉我。

同位素过滤器烧烤哈希

1 个答案: