同位素 v2 网格 - 多个过滤器 - 隐藏空过滤器
Isotope v2 Grid - Multiple Filters - Hide empty filters
我当前的同位素网格有两个用于对网格项目进行排序的下拉过滤器。第一个过滤器是菜单类型,第二个过滤器是饮料类型。 Each menu type however does not contain all drink types so when some filter configurations are chosen, no results are showed, which is correct.但我想在用户选择第一个过滤器时阻止这种情况发生,第二个过滤器隐藏空类型。
当前过滤器的工作代码笔:https://codepen.io/whitinggg/pen/zYGEaNb
这是我的旧过滤器代码:
// Select Filters
jQuery(function ($) {
var $grid = $('.grid');
var $selects = $('div#filterGroup select').change(function() {
var selector = $selects.get().map(function(el) { // map the select elements ...
return $(el).val(); // ... to an array of values
}).join('') || '*'; // if joined array is empty-string, then default to a single '*'
$grid.isotope({
'filter': selector
});
return false;
});
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
});
我已尝试将我的代码从 Internet 上有关此主题的其他链接更改为以下内容,但没有成功。
// Select Filters
jQuery(function ($) {
var $grid = $('.grid');
var $selects = $('div#filterGroup select').change(function() {
var selector = $selects.get().map(function(el) { // map the select elements ...
return $(el).val(); // ... to an array of values
}).join('') || '*'; // if joined array is empty-string, then default to a single '*'
$grid.isotope({
'filter': selector
});
return false;
});
//Hide Empty Filters
var DROP = $('div#filterGroup select option:not([data-filter=""])');
// list of all class in html
var strall = ''; $('.grid-item').each(function(el){ strall += $(this).attr('class') });
// remove select if not in strall.. TODO : needs improvement, this is kind a hack
DROP.each(function(el){
var nowfilter = $(this).attr('data-filter').replace('.', ''); // co_kenya
if( strall.indexOf( nowfilter ) == -1 ){
console.log( 'this one is missing ' + nowfilter );
$(this).remove();
}
});
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
});
这可能吗?非常感谢任何帮助!
首先给每个下拉添加一个ID,方便我们区分。
<select id="menu-selector" class="filter option-set" data-filter-group="menu">
[...]
<select id="type-selector" class="filter option-set" data-filter-group="categories">
然后,为每个下拉列表添加一个更改侦听器。我们将查看菜单下拉更改侦听器的代码。
首先,从 selected 下拉列表中获取 class 过滤器:
$('#menu-selector').change(function() {
var selectedClass = $('#menu-selector option:selected').attr('value');
然后我们将 select 所有匹配该类型的网格项目,看看它们还有哪些其他 classes。这些其他 classes 将是可用类型
var availableTypes = $(`.grid-item${selectedClass}`)
.toArray()
.flatMap(div => Array.from(div.classList.values())) //get all of the classes
.filter(i => !['grid-item', selectedClass.substring(1)].includes(i)); //eliminate useless ones
最后,切换另一个下拉菜单中的 disabled
属性,仅启用可用的选项。
$('#type-selector option')
.each( (i,el) => $(el).prop('disabled', el.value != "" && !availableTypes.includes(el.value.substring(1))));
应该可以了。类型下拉列表的更改处理程序是相同的,但引用了相反的下拉列表。检查 the codepen 了解详情。
我当前的同位素网格有两个用于对网格项目进行排序的下拉过滤器。第一个过滤器是菜单类型,第二个过滤器是饮料类型。 Each menu type however does not contain all drink types so when some filter configurations are chosen, no results are showed, which is correct.但我想在用户选择第一个过滤器时阻止这种情况发生,第二个过滤器隐藏空类型。
当前过滤器的工作代码笔:https://codepen.io/whitinggg/pen/zYGEaNb
这是我的旧过滤器代码:
// Select Filters
jQuery(function ($) {
var $grid = $('.grid');
var $selects = $('div#filterGroup select').change(function() {
var selector = $selects.get().map(function(el) { // map the select elements ...
return $(el).val(); // ... to an array of values
}).join('') || '*'; // if joined array is empty-string, then default to a single '*'
$grid.isotope({
'filter': selector
});
return false;
});
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
});
我已尝试将我的代码从 Internet 上有关此主题的其他链接更改为以下内容,但没有成功。
// Select Filters
jQuery(function ($) {
var $grid = $('.grid');
var $selects = $('div#filterGroup select').change(function() {
var selector = $selects.get().map(function(el) { // map the select elements ...
return $(el).val(); // ... to an array of values
}).join('') || '*'; // if joined array is empty-string, then default to a single '*'
$grid.isotope({
'filter': selector
});
return false;
});
//Hide Empty Filters
var DROP = $('div#filterGroup select option:not([data-filter=""])');
// list of all class in html
var strall = ''; $('.grid-item').each(function(el){ strall += $(this).attr('class') });
// remove select if not in strall.. TODO : needs improvement, this is kind a hack
DROP.each(function(el){
var nowfilter = $(this).attr('data-filter').replace('.', ''); // co_kenya
if( strall.indexOf( nowfilter ) == -1 ){
console.log( 'this one is missing ' + nowfilter );
$(this).remove();
}
});
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
});
这可能吗?非常感谢任何帮助!
首先给每个下拉添加一个ID,方便我们区分。
<select id="menu-selector" class="filter option-set" data-filter-group="menu">
[...]
<select id="type-selector" class="filter option-set" data-filter-group="categories">
然后,为每个下拉列表添加一个更改侦听器。我们将查看菜单下拉更改侦听器的代码。
首先,从 selected 下拉列表中获取 class 过滤器:
$('#menu-selector').change(function() {
var selectedClass = $('#menu-selector option:selected').attr('value');
然后我们将 select 所有匹配该类型的网格项目,看看它们还有哪些其他 classes。这些其他 classes 将是可用类型
var availableTypes = $(`.grid-item${selectedClass}`)
.toArray()
.flatMap(div => Array.from(div.classList.values())) //get all of the classes
.filter(i => !['grid-item', selectedClass.substring(1)].includes(i)); //eliminate useless ones
最后,切换另一个下拉菜单中的 disabled
属性,仅启用可用的选项。
$('#type-selector option')
.each( (i,el) => $(el).prop('disabled', el.value != "" && !availableTypes.includes(el.value.substring(1))));
应该可以了。类型下拉列表的更改处理程序是相同的,但引用了相反的下拉列表。检查 the codepen 了解详情。