jQueryアイソトープコンビネーションフィルタとバーベキューハッシュヒストリーの混合 - ヒントを理解するのに役立つ

Question

Combination filtersとJquery BBQ Hash Historyを使用する方法を理解しようとしています。

私がしたいことは、ロゴ、アイデンティティまたはブランドによるユーザーフィルタを使用することです。ユーザーが「Logos」をクリックすると、「Non-Profit、Education、Retail」などのサブフィルターを使用できるようになります。jquery BBQコードを実装せずにコンビネーションフィルターを正常に動作させることができます。作成者本人から -

$optionSets.find('.filter-main a').click(function(){ 
    var $this = $(this); 
    // don't proceed if already selected 
    if ($this.hasClass('selected')) { 
     return; 
    } 
    changeSelectedLink($this); 
     // get href attr, remove leading # 
    var href = $this.attr('href').replace(/^#/, ''), 
     // convert href into object 
     // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' } 
     option = $.deparam(href, true); 
    // apply new option to previous 
    $.extend(isotopeOptions, option); 
    // set hash, triggers hashchange on window 
    $.bbq.pushState(isotopeOptions); 
    isOptionLinkClicked = true; 
    return false; 
    }); 

Answer 1

は解決http://support.metafizzy.co/2011/isotope-combo-filters-hash-links.html

$(function(){ 
    var $container = $('#container'), 
     filters = {}, 
     // get filter from hash, remove leading '#' 
     filterSelector = window.location.hash.slice(1); 

    $('#filters a').click(function(){ 
    // store filter value in object 
    // i.e. filters.color = 'red' 
    var $this = $(this), 
     name = $this.attr('data-filter-name'), 
     value = $this.attr('data-filter-value'), 
     isoFilters = [], 
     filterName, prop; 

    filters[ name ] = value; 

    for (prop in filters) { 
     isoFilters.push(filters[ prop ]); 
    } 

    var filterSelector = isoFilters.join(''); 

    // trigger isotope if its ready 
    if ($container.data('isotope')) { 
     $container.isotope({ filter: filterSelector }); 
    } 

    window.location.hash = filterSelector; 

    // toggle highlight 
    $this.parents('ul').find('.selected').removeClass('selected'); 
    $this.parent().addClass('selected'); 

    return false; 

    }); 


    // if there was a filter, trigger a click on the 
    // corresponding option 
    if (filterSelector) { 
    var selectorClasses = filterSelector.split('.').slice(1); 
    $.each(selectorClasses, function(i, selectorClass) { 
     $('#filters a[data-filter-value=".' + selectorClass + '"]').click(); 
    }); 
    } 

    $('#container').isotope({ 
    itemSelector: '.item', 
    filter: filterSelector, 
    masonry: { 
     columnWidth: 80 
    } 
    }); 

});