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

Question

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

一切似乎工作正常，除了如果我去一个URL地址散列已经填写，复选框不检查。

例如，当您到达此页面时，应已检查这些框：“抽象”，“肖像”，“水果”。 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，这是在从包含的脚本重定向去，是非常短的，而且似乎abrubptly结束。我将它更改为过去的3.03版，看起来是正确的长度，它工作正常（你应该添加代码来检查显示的复选框）。

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

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