JQuery Isotope -Kombinationsfilter gemischt mit BBQ Hash -Geschichte - brauchen Hilfe, um zu verstehen, wie es geht

Question

Ich versuche zu verstehen, wie man benutzt Kombinationsfilter mit JQuery BBQ Hash -Geschichte.

Ich möchte den Benutzerfilter nach Logos, Identität oder Branding haben. Wenn der Benutzer auf Logos klickt, möchte ich, dass sie dann durch "gemeinnützige Organisation, Bildung, Einzelhandel" usw. unterbezogen werden können. Ich weiß, dass Kombinationsfilter ohne den implementierten Jquery BBQ-Code gut funktionieren, aber ich möchte beides tun.

    $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

Sehen http://support.metafizzy.co/2011/isotope-combo-filter-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
    }
  });

});