同位素：组合过滤器+通过Bootstrap 4按URL过滤

Question

我已经用Bootstrap 4设置了一个同位素组合过滤器，但在通过URL获取过滤器时出现问题。添加“按URL过滤”功能时，过滤器将中断并且仅允许一维过滤。我需要“组合和按URL过滤”功能才能无缝工作。有人可以向我解释我将如何实现这一目标吗？

HTML

<div class="filters">
    <div class="ui-group">
        <h3>Resource</h3>
        <div class="button-group js-radio-button-group" data-filter-group="resource">
            <button class="button is-checked" data-filter="">
                All Resources
            </button>
            <button class="button" data-filter=".whitepapers">
                White Papers
            </button>
            <button class="button" data-filter=".articles">
                Articles
            </button>
            <button class="button" data-filter=".case-studies">
                Case Studies
            </button>
            <button class="button" data-filter=".data-sheets">
               Data Sheets
            </button>
            <button class="button" data-filter=".brochures">
                Brochures
            </button>
            <button class="button" data-filter=".catalogs">
                Catalogs
            </button>
            <button class="button" data-filter=".newsletters">
                Newsletters
            </button>
            <button class="button" data-filter=".webinars">
                Webinars
            </button>
            <button class="button" data-filter=".communities">
                Communities
            </button>
        </div>
    </div>
    <div class="ui-group">
        <h3>Type</h3>
        <div class="button-group js-radio-button-group" data-filter-group="type">
            <button class="button is-checked" data-filter="">
                any
            </button>
            <button class="button" data-filter=".data-quality">
                Data Quality
            </button>
            <button class="button" data-filter=".direct-marketing">
                Direct Marketing
            </button>
            <button class="button" data-filter=".informatics">
                Informatics
            </button>
        </div>
    </div>
    <div class="ui-group">
        <h3>Number</h3>
        <div class="button-group js-radio-button-group" data-filter-group="shape">
            <button class="button is-checked" data-filter="">
                any
            </button>
            <button class="button" data-filter=".english">
                English
            </button>
            <button class="button" data-filter=".german">
                German
            </button>
            <button class="button" data-filter=".italian">
                Italian
            </button>
            <button class="button" data-filter=".spanish">
                Spanish
            </button>
        </div>
    </div>
</div>

jQuery

// init Isotope
var $grid = $('.grid').isotope({
    itemSelector: '.grid-item'
});

// store filter for each group
var filters = {};

$('.filters').on('click', '.button', function(event) {
    var $button = $(event.currentTarget);
    // get group key
    var $buttonGroup = $button.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[filterGroup] = $button.attr('data-filter');
    // combine filters
    var filterValue = concatValues(filters);
    // set filter for Isotope
    $grid.isotope({
        filter: filterValue
    });
});

// change is-checked class on buttons
$('.button-group').each(function(i, buttonGroup) {
    var $buttonGroup = $(buttonGroup);
    $buttonGroup.on('click', 'button', function(event) {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        var $button = $(event.currentTarget);
        $button.addClass('is-checked');
    });
});

// flatten object by concatting values
function concatValues(obj) {
    var value = '';
    for (var prop in obj) {
        value += obj[prop];
    }
    return value;
}

function getHashFilter() {
    var hash = location.hash;
    // get filter=filterName
    var matches = location.hash.match( /filter=([^&]+)/i );
    var hashFilter = matches && matches[1];
    return hashFilter && decodeURIComponent( hashFilter );
}

$( function() {

  var $grid = $('.grid');

  // bind filter button click
  var $filters = $('.filters').on( 'click', 'button', function() {
    var filterAttr = $( this ).attr('data-filter');
    // set filter in hash
    location.hash = 'filter=' + encodeURIComponent( filterAttr );
  });

  var isIsotopeInit = false;

  function onHashchange() {
    var hashFilter = getHashFilter();
    if ( !hashFilter && isIsotopeInit ) {
      return;
    }
    isIsotopeInit = true;
    // filter isotope
    $grid.isotope({
      itemSelector: '.grid-item',
      layoutMode: 'masonry',
      filter: hashFilter
    });
    // set selected class on button
    if ( hashFilter ) {
      $filters.find('.is-checked').removeClass('is-checked');
      $filters.find('[data-filter="' + hashFilter + '"]').addClass('is-checked');
    }
  }

  $(window).on( 'hashchange', onHashchange );
  // trigger event handler to init Isotope
  onHashchange();
});