Isotope Metafizzy多维度筛选组合逻辑异常求助

问题根源 #

当前代码的concatValues函数只是简单拼接所有筛选值，导致多条件组合时生成的筛选器无法执行正确的"AND"匹配，反而会错误匹配仅满足单个条件的元素。

修复方案 #

修改筛选条件的拼接逻辑，只保留非"all"的有效条件，并以Isotope支持的AND格式组合：

$(window).load(function(){  
    
// 初始化Isotope
var $grid = $('.grid-item').isotope({
    itemSelector: '.item',
    layoutMode: 'fitRows',
});

// 存储每个筛选组的条件
var filters = {};

$('.filters').on( 'change', function( event ) {
  var $select = $( event.target );
  // 获取筛选组标识
  var filterGroup = $select.attr('value-group');
  // 设置当前组的筛选条件：选"all"则置空，否则确保是带点的类选择器
  var selectedValue = event.target.value;
  filters[ filterGroup ] = selectedValue === 'all' 
    ? '' 
    : (selectedValue.startsWith('.') ? selectedValue : '.' + selectedValue);
  
  // 组合所有有效筛选条件
  var filterValue = concatValues( filters );
  // 处理全选情况：显示所有元素
  filterValue = filterValue || '*';
  
  // 应用筛选
  $grid.isotope({ filter: filterValue });
});

// 拼接有效筛选条件：仅保留非空值，以AND逻辑组合
function concatValues( obj ) {
  var validFilters = [];
  for ( var prop in obj ) {
    if (obj[prop]) {
      validFilters.push( obj[ prop ] );
    }
  }
  return validFilters.join('');
}
})  

关键细节说明 #

• 类选择器格式：确保每个筛选条件是带.的类选择器（如.city-london），代码会自动处理不带点的value值。
• AND逻辑实现：将多个有效条件直接拼接（如.city-london.date-friday），Isotope会解析为"同时拥有这两个类的元素"。
• 默认"all"处理：选择"all"时该组条件置空，不参与筛选；所有组都选"all"时，用*匹配全部元素。

修改后，选择「城市：伦敦/日期：周五」时，只有同时满足两个条件的演出条目会被显示，华盛顿周五的条目会被正确过滤。

内容的提问来源于stack exchange，提问作者Ben Belek