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

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

UPDATE

这是我迄今为止...

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或任何其他值。这意味着同位素不会过滤任何东西。

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

点击事件函数应该或多或少类似的文件，特别是标题为“jQuery脚本”一节。该函数从href值中获取选择器，过滤您的Isotope实例，然后通过BBQ哈希历史管理进行推送。

我会确保你有一个函数绑定到hashchange以及正是在文档中写的。确保您连接到BBQ的hashchange活动以使您的过滤内容可收藏起来非常重要。

UPDATE

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

看一看下面的代码，并比较你刚才的例子： http://jsfiddle.net/HWwa4/1/