我使用复选框组合过滤器(使用jquery UI设置样式),组和哈希历史记录,将同位素作为产品排序矩阵工作。总而言之,一切都按预期工作,结果非常好。我遇到了一个问题,我需要根据某些复选框重新排序过滤结果。如果你看一下这里的小提琴:http://jsfiddle.net/rwbennet/B8kV3/2/你可以看到我的结果。问题是,如果您向下滚动到复选框并选择“Wellness Incentives”,我需要在结果中首先显示所有“Mastercard”标记结果。所以作为一个基本的排序,一切都只是字母顺序,如果你选择一些复选框,结果只保持字母顺序,但如果你选择“健康激励”作为“使用”之一,结果应该重新排序并从“万事达卡”开始“结果。还有其他例外,但这只是一个例子。有没有办法做我在这里解释建立在同位素中的东西?非常感谢您对此问题的任何考虑。
目前,这是我的同位素代码:
var $container = $('#container');
var $filterDisplay = $('#filter-display');
// Initiate Isotope and pass in hash change filter
$container.isotope({
filter: hashfilter
});
if( location.hash != "" ){
var hashfilter = location.hash.substr( 1 );
} else {
var hashfilter = "*";
}
var filters = {};
isOptionLinkClicked = false;
$('#options').on( 'change', function( jQEvent ) {
var checkbox = jQEvent.target;
var $checkbox = $( checkbox );
var value = checkbox.value;
var group = $checkbox.parents('.option-set').attr('data-group');
// create array for filter group, if not there yet
if ( !filters[ group ] ) {
filters[ group ] = [];
}
var index = $.inArray( checkbox.value, filters[ group ] );
if ( checkbox.checked ) {
var selector = 'input';
$checkbox.siblings( selector ).removeAttr('checked');
if ( index === -1 ) {
// add filter to group
filters[ group ].push( checkbox.value );
isOptionLinkClicked = true;
$(this).data('clicked', true);
//console.log($(this).data());
}
} else {
// remove filter from group
filters[ group ].splice( index, 1 );
}
var i = 0;
var comboFilters = [];
for ( var prop in filters ) {
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); // ex: [ 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++
location.hash = comboFilters.join(', ');
var hashObject = location.hash.replace( /^#/, '' );
//return false;
}
$container.isotope({ filter: comboFilters.join(', ') });
// Helpful for messing with hashchange URLs
//$filterDisplay.text( comboFilters.join(', ') );
});
var hashObject = location.hash.replace( /^#/, '' );
var hashChanged = false;
$(window).bind( 'hashchange', function( event ){
if(location.hash != "") {
var hashfilter = location.hash.substr(1);
} else {
var hashfilter = "*";
}
$container.isotope({
filter: hashfilter
});
})
// trigger hashchange to capture initial hash options
.trigger( 'hashchange' );
// trigger ui clicks to mirror initial hash options
var strHash = location.hash.substr(1); // Get our url hash
var arHash = strHash.split(" ").join("").split(",").join("").split(".");
// get rid of the spaces, commas, and conver to an array
var arHashUnique = Array(); // remove duplicates from the array
$.each(arHash, function(i, item){
if($.inArray(item, arHashUnique) === -1 && item != "")
{
arHashUnique.push(item);
}
});
for(var i in arHashUnique) // click the appropriate filters {
$("#" + arHashUnique[i]).click();
}