JQuery Isotope Combination Filters mezclados con el historial de hash de BBQ - Necesita ayuda para comprender cómo

Question

Estoy tratando de entender cómo usar Filtros combinados con JQuery BBQ Hash Historia.

Lo que quiero hacer es tener el filtro de usuario por logotipos, identidad o marca. Si el usuario hace clic en los logotipos, quiero que puedan subfilterar por "sin fines de lucro, educación, venta minorista", etc. Sé que los filtros de combinación funcionan bien sin el código JQuery BBQ implementado, pero me gustaría hacer ambas cosas.

    $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

Ver 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
    }
  });

});