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变量等 - 但不要花太多时间。

谢谢，非常感谢任何帮助。 [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');
});

Answer 1

看起来你已经摆脱了变量selector的价值，因为你的标签不再具有data-filter的属性。如果您设置断点以获取selector的值，则会看到它返回undefined而不是.corporate或任何其他值。这意味着Isotope不再过滤任何东西了。

请仔细查看以下链接的文档。 http://isotope.metafizzy.co/docs/hash-history-jquery-bbq.html

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

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

更新

你点击了两个功能。你真的只需要第二个，然后从hashchange事件中激活同位素过滤器。

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

将Isotope与BBQ哈希历史相结合

1 个答案: