jquery - jQuery Isotope Combination Filters with BBQ Hash History - 在浏览历史时突出显示过滤器选项

Question

我有一个使用出色的 Isotope 和 BBQ jQuery 插件的页面。我遵循了组合过滤器并进行了历史演示/测试，但无法弄清楚如何在单步浏览页面历史记录时选择过滤器（如常规哈希历史演示所示）。

这是我完整的js代码：

    // modified Isotope methods for gutters in masonry
$.Isotope.prototype._getMasonryGutterColumns = function() {
    var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;
        containerWidth = this.element.width();

    this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||
                  // or use the size of the first item
                  this.$filteredAtoms.outerWidth(true) ||
                  // if there's no items, use size of container
                  containerWidth;

    this.masonry.columnWidth += gutter;

    this.masonry.cols = Math.floor( ( containerWidth + gutter ) / this.masonry.columnWidth );
    this.masonry.cols = Math.max( this.masonry.cols, 1 );
};

$.Isotope.prototype._masonryReset = function() {
    // layout-specific props
    this.masonry = {};
    // FIXME shouldn't have to call this again
    this._getMasonryGutterColumns();
    var i = this.masonry.cols;
    this.masonry.colYs = [];
    while (i--) {
      this.masonry.colYs.push( 0 );
    }
};

$.Isotope.prototype._masonryResizeChanged = function() {
    var prevSegments = this.masonry.cols;
    // update cols/rows
    this._getMasonryGutterColumns();
    // return if updated cols/rows is not equal to previous
    return ( this.masonry.cols !== prevSegments );
};

$(function(){
    var wait = $(".loading");
    wait.animate({opacity: 0}, 500, 'linear').animate({opacity: 1}, 500, 'linear');

    var $container = $('#container');
    var initialOptions = {
        filter: '*',
        itemSelector : '.item',
        sortBy: 'random',
        layoutMode: 'masonry',
        masonry: {
            columnWidth: 170,
            gutterWidth: 6.6
        }
    };

    $container.imagesLoaded( function(){

        // build a hash for all our options
        var options = {
            // special hash for combination filters
            comboFilters: {}
        };

        var $optionSets = $('#options').find('.option-set'),
            isOptionLinkClicked = false;

        // filter buttons
        $optionSets.find('a').click(function(){
        //$('.filter').on( 'click', 'a', function( event ) {
            event.preventDefault();
            var $this = $(this);
            // don't proceed if already selected
            if ( $this.hasClass('selected') ) {
              return false;
            }

            selectLink( $this );

            var $optionSet = $this.parents('.option-set');
            var group = $optionSet.attr('data-filter-group');
            options.comboFilters[ group ] = $this.attr('data-filter-value');
            $.bbq.pushState( options );
            isOptionLinkClicked = true;
        });

        function selectLink( $link ) {
            $link.parents('.option-set').f

ind('.selected').removeClass('selected');
            $link.addClass('selected')
        }

        var location = window.location;
        var $comboFilterOptionSets = $('.combo-filters .option-set');
        var hashChanged = false;

        function getComboFilterSelector( comboFilters ) {
            // build filter
            var isoFilters = [];
            var filterValue, $link, $optionSet;
            for ( var prop in comboFilters ) {
                filterValue = comboFilters[ prop ];
                isoFilters.push( filterValue );
                // change selected combo filter link
                $optionSet = $comboFilterOptionSets.filter('[data-filter-group="' + prop + '"]');
                $link = $optionSet.find('a[data-filter-value="' + filterValue + '"]');
                //selectLink( $link );
            }
            var selector = isoFilters.join('');
            return selector;
        }

        $( window ).on( 'hashchange', function() {
            //var aniEngine = hashChanged ? 'best-available' : 'none'
            //var isoOptions = $.extend( {}, setupOptions, options );

            if ( location.hash ) {
                $.extend( options, $.deparam.fragment( location.hash, true ) );
            }
            // build options from hash and initial options
            var isoOptions = $.extend( {}, initialOptions, options );

            if ( options.comboFilters ) {
                isoOptions.filter = getComboFilterSelector( options.comboFilters );
            }

            $container.isotope( isoOptions );

            // if option link was not clicked
            // then we'll need to update selected links
            if ( !isOptionLinkClicked ) {
                // iterate over options
                var hrefObj, hrefValue, $selectedLink;
                for ( var key in options ) {
                    hrefObj = {};
                    hrefObj[ key ] = options[ key ];
                    // convert object into parameter string
                    // i.e. { filter: '.inner-transition' } -> 'filter=.inner-transition'
                    hrefValue = $.param( hrefObj );
                    alert(hrefValue);
                    // get matching link
                    $selectedLink = $optionSets.find('a[href="#' + hrefValue + '"]');
                    selectLink( $selectedLink );
                }
            }

            isOptionLinkClicked = false;
            hashChanged = true;
        })

        // trigger hashchange to capture initial hash options
        .trigger( 'hashchange' );
        wait.fadeOut(300);
        $('.item').delay(800).fadeIn(500);

    });
});

我的问题在这方面：

if ( !isOptionLinkClicked ) {
                // iterate over options
                var hrefObj, hrefValue, $selectedLink;
                for ( var key in options ) {
                    hrefObj = {};
                    hrefObj[ key ] = options[ key ];
                    // convert object into parameter string
                    // i.e. { filter: '.inner-transition' } -> 'filter=.inner-transition'
                    hrefValue = $.param( hrefObj );
                    alert(hrefValue);
                    // get matching link
                    $selectedLink = $optionSets.find('a[href="#' + hrefValue + '"]');
                    selectLink( $selectedLink );
                }
            }