将同位素与烧烤哈希历史集成

Question

我知道这是一个很受欢迎的问题，但我在使用 Isotope 网站上的教程来开发我当前的同位素以使用 BBQ hash history 时遇到了一些困难。

我实际上是在尝试将 BBQ 哈希历史添加到我当前的设置中，以便我可以直接链接到过滤后的内容。

到目前为止，这是我的 jQuery 代码，运行良好。

jQuery(function () {
    var $container = jQuery('.wwd-content-container');
    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.each-wwd-content',
            filter: '.corporate'
        });
    });
    jQuery('.wwd-filters a').click(function () {
        jQuery('a.active-filter').removeClass('active-filter');
        jQuery(this).addClass('active-filter');
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector
        });
        return false;
    });
});

我已将过滤器导航更改为：

<li><a href="#" data-filter=".<?php echo esc_attr( $page_class ) ?>"><?php the_title(); ?></a></li>

到

<li><a href="#filter=.<?php echo esc_attr( $page_class ) ?>"><?php the_title(); ?></a></li>

我使用的是 Wordpress，因此使用了 $page_class 变量等——但不要在这上面花太多时间。

谢谢，任何帮助将不胜感激。 回复

更新

这就是我目前所拥有的......

jQuery(function () {
    var $container = jQuery('.wwd-content-container');
    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.each-wwd-content',
            filter: '.corporate'
        });
    });
    jQuery('.wwd-filters a').click(function () {
        jQuery('a.active-filter').removeClass('active-filter');
        jQuery(this).addClass('active-filter');
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector
        });
        return false;
    });
    jQuery('.wwd-filters a').click(function(){
          // get href attr, remove leading #
      var href = jQuery(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;
    });
    jQuery(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');
});

Answer 1

看起来您已经删除了变量selector 的值，因为您的a 标记不再具有data-filter 属性。如果您设置断点来获取selector 的值，您会看到它返回undefined 而不是.corporate 或任何其他值。这意味着同位素不再过滤任何东西。

仔细阅读下面链接的文档。 http://isotope.metafizzy.co/docs/hash-history-jquery-bbq.html

您的点击事件函数应该或多或少类似于文档，尤其是标题为“jQuery 脚本”的部分。此函数从 href 值中获取选择器，过滤您的 Isotope 实例，然后通过 BBQ 哈希历史管理推送它。

我会确保你也有一个绑定到hashchange 的函数，这正是文档中所写的。确保您连接到 BBQ 的 hashchange 事件以使您过滤的内容可收藏，这一点非常重要。

更新

你有两个点击连接的功能。你真的只需要第二个，它会从hashchange 事件中触发同位素过滤器。

查看以下代码并与您之前的示例进行比较： http://jsfiddle.net/HWwa4/1/