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