同位素 - 基于URL哈希复选框

Question

我正在使用Isotope插件，我正在使用它来使用多个按钮组进行过滤，并创建一个URL哈希。

一切似乎都运行良好，除非我转到已填写网址哈希的网页地址，否则不会选中复选框。

例如，当你到达这个页面时，应该已经检查过这些框：“abstract”，“portraits”，“fruit”。 https://s.codepen.io/happyvalley/debug/OjOpKJ/NjrYzwQWZRZA#filter=.abstract.fruit%2C.abstract.portrait

以下是codepen的链接：https://codepen.io/happyvalley/pen/OjOpKJ/

  $(document).ready( function() {

    // init Isotope
    var $grid = $('.tool-grid-wrap').isotope({
      itemSelector: '.grid-item',
      sortBy : 'random',
      // set itemSelector so .grid-sizer is not used in layout
      percentPosition: true,
      layoutMode: 'masonry',
    });

    // layout Isotope after each image loads
    $grid.imagesLoaded().progress( function() {
      $grid.isotope('layout')
    });


    // store filter per group
    var filters = {};
    var $filterDisplay = $('#filter-display');
    var $container = $('.tool-grid-wrap');


    $(function() {   
      $container.isotope();
      // do stuff when checkbox change
      $('#options').on('change', function(jQEvent) {
        var $checkbox = $(jQEvent.target);
        manageCheckbox($checkbox);
        var comboFilter = getComboFilter(filters);
        $container.isotope({
          filter: comboFilter
        });
        $filterDisplay.text(comboFilter);
        location.hash = 'filter=' + encodeURIComponent( comboFilter );
      });
    });

    function getComboFilter(filters) {
      var i = 0;
      var comboFilters = [];
      var message = [];
      for (var prop in filters) {
        message.push(filters[prop].join(''));
        var filterGroup = filters[prop];
        // skip to next filter group if it doesn't have any values
        if (!filterGroup.length) {
          continue;
        }
        if (i === 0) {
          // copy to new array
          comboFilters = filterGroup.slice(0);
        } else {
          var filterSelectors = [];
          // copy to fresh array
          var groupCombo = comboFilters.slice(0); // [ A, B ]
          // merge filter Groups
          for (var k = 0, len3 = filterGroup.length; k < len3; k++) {
            for (var j = 0, len2 = groupCombo.length; j < len2; j++) {
              filterSelectors.push(groupCombo[j] + filterGroup[k]); // [ 1, 2 ]
            }
          }
          // apply filter selectors to combo filters for next group
          comboFilters = filterSelectors;
        }
        i++;
      }
      var comboFilter = comboFilters.join(',');
      return comboFilter;
    }

    function manageCheckbox($checkbox) {
      var checkbox = $checkbox[0];
      var group = $checkbox.parents('.option-set').attr('data-group');
      // create array for filter group, if not there yet
      var filterGroup = filters[group];
      if (!filterGroup) {
        filterGroup = filters[group] = [];
      }
      var isAll = $checkbox.hasClass('all');
      // reset filter group if the all box was checked
      if (isAll) {
        delete filters[group];
        if (!checkbox.checked) {
          checkbox.checked = 'checked';
        }
      }
      // index of
      var index = $.inArray(checkbox.value, filterGroup);
      if (checkbox.checked) {
        var selector = isAll ? 'input' : 'input.all';
        $checkbox.siblings(selector).removeAttr('checked');
        if (!isAll && index === -1) {
          // add filter to group
          filters[group].push(checkbox.value);
        }
      } else if (!isAll) {
        // remove filter from group
        filters[group].splice(index, 1);
        // if unchecked the last box, check the all
        if (!$checkbox.siblings('[checked]').length) {
          $checkbox.siblings('input.all').attr('checked', 'checked');
        }
      }
    }



    $(window).on( 'load', function () {
      var hashFilter = getHashFilter();
      // filter isotope
      $container.isotope({
        itemSelector: '.item',
        filter: hashFilter,
      });
    });

    // filter with selects and checkboxes
    var $checkboxes = $('#options input');

    // set initial checkboxes from hash
    var hashFilter = getHashFilter();
    if ( hashFilter ) {
      var startFilters = hashFilter.split(',');
      startFilters.forEach( function( filter ) {
        var $checkbox = $checkboxes.filter('[value="' + filter + '"]');
        $checkbox.attr( 'checked', 'checked' );
      });
    }

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


  });

Answer 1

看来，文件https://unpkg.com/isotope-layout@3.0.4/dist/isotope.pkgd.min.js（包含来自您所包含脚本的重定向的位置）非常短，似乎无法正常结束。我将其更改为过去的版本3.03，它看起来是正确的长度，并且它正在工作（您应该添加代码以检查显示的复选框）。

https://codepen.io/poootaatoooo/pen/vJWmPN

https://s.codepen.io/poootaatoooo/debug/vJWmPN/mWMoNbwLwVnk#filter=.abstract.fruit%2C.abstract.portrait