將同位素與BBQ哈希歷史記錄集成

Question

我知道這是一個很普遍的問題，但是我在同位素網站上的教程上稍作努力，以開發當前的同位素以使用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');
});

Answer 1

看起來您已經擺脫了變量selector的值，因為您的標記不再具有data-filter的屬性。 如果設置斷點以獲取selector的值，則會看到它返回undefined的值，而不是諸如.corporate之類的.corporate或其他任何值。 這意味着同位素不再過濾任何東西。

請仔細閱讀以下鏈接的文檔。 http://isotope.metafizzy.co/docs/hash-history-jquery-bbq.html

您的click事件函數應大致上與文檔類似，尤其是標題為“ jQuery腳本 ”的部分。 此函數從href值中獲取選擇器，過濾您的同位素實例，然后將其推送到BBQ哈希歷史記錄管理中。

我會確保您也有一個綁定到hashchange的函數，也正是文檔中所寫的內容。 確保您加入BBQ的hashchange事件以使過濾后的內容可設置書簽非常重要。

更新

點擊時，您已經獲得了兩個功能。 您實際上只需要第二個，它將從hashchange事件中觸發同位素過濾器。

看一下下面的代碼，並與之前的示例進行比較： http : //jsfiddle.net/HWwa4/1/