0

我知道这是一个很受欢迎的问题，但我在Isotope网站上的教程中有点挣扎，以开发我当前的 Isotope 以使用BBQ 哈希历史。

我实际上是在尝试将 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 变量等——但不要花太多时间在上面。

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

更新

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

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');
});
4

1 回答 1

1

看起来您已经摆脱了 variable 的值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/

于 2013-05-15T13:09:09.487 回答