我目前正在使用同位素筛选出版物列表,但希望能够将标准的、文档化的链接筛选方法与选择元素结合起来,因为我的第二个筛选列表相当长。
我正在努力处理两种不同类型的元素和,将所选值组合成一个选项数组。我可以使过滤器彼此独立工作(下面的代码),但它们需要一起工作。如何将两个不同的操作(单击或更改)和两个属性(class=或value=)组合到一个选项数组中以传递给同位素过滤器?
var $container = $('#library');
// select ccskills publications by default
$container.isotope({ filter: '.ccskills' });
var $optionSets = $('#library-options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
$container.isotope( options );
return false;
});
// using the 'chozen' plugin to style my select element
$(".chzn-select").chosen().change(
function() {
var industry = $("option:selected", this).val();
$container.isotope({filter: industry});
}
);
您需要一个多维数组,每个过滤器类型都有一个数组维度。我以前做过这个,这里有一个现场演示示例!
看到!对于js.
EDIT (Feb, 2020):到演示和JavaScript的链接已经更新为2020年的回溯机器url
在我的js文件中,你会对名为getComboFilters(filters)的结束函数感兴趣
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++;
}
comboFilters.sort();
var comboFilter = comboFilters.join(', ');
return comboFilter;
}
这个函数处理各种过滤器数组集合的所有推入、拼接和排序,但是要使用它,你需要将它添加到过滤器例程中…我说的是例程,但它实际上是例程,因为你似乎两次单独调用过滤器方法:
$container.isotope({ filter: '.ccskills' });
,后来:
$container.isotope({filter: .industry});
如果你要一起过滤类型,所有的过滤器类型都必须知道彼此,这意味着它们必须在同一个javascript外壳内,并且过滤器方法只需要调用一次,此时它将根据所有过滤器类型条件进行测试。
使用getComboFilter(filters)函数,像这样调用组合过滤器方法:
var $container = $('#library');
var filters = {};
var comboFilter = getComboFilter( filters );
$container.isotope({ filter: comboFilter });
最后,完全集成到您的文件中应该是这样的:
var $container = $('#library');
var filters = {};
var comboFilter = getComboFilter( filters );
$container.isotope({ filter: comboFilter });
// This next part targets all the possible filter items
// i.e. '.option-set a' just like your example
$('.option-set a').click(function(){
// exit directly if filter already disabled
if ($(this).hasClass('disabled') ){
return false;
}
var $this = $(this);
var $optionSet = $(this).parents('.option-set');
var group = $optionSet.attr('data-filter-group');
// store filter value in object
var filterGroup = filters[ group ];
if ( !filterGroup ) {
filterGroup = filters[ group ] = [];
}
var comboFilter = getComboFilter( filters );
$container.isotope({ filter: 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++;
}
comboFilters.sort();
var comboFilter = comboFilters.join(', ');
return comboFilter;
}
希望这能帮助到一些人!