Question

我正在尝试使用同位素创建可过滤的课程列表，但是我的过滤器似乎无法相互配合。我使用的是与同位素网站上提供的示例相同的js，我的笔是https://codepen.io/anon/pen/vbMVqp

例如选择“艺术与历史学院”和“学士学位”将列出其他大学的课程。我只需要显示b.a.艺术与历史学院的课程。这是按预期的方式工作还是我需要添加某种逻辑？

js

// external js: isotope.pkgd.js

// init Isotope
var $grid = $('.courses').isotope({
  itemSelector: '.grid__item',
    layoutMode: 'vertical',

});

// store filter for each group
var filters = {};

$('.filters').on( 'change', function( event ) {
  var $select = $( event.target );
  // get group key
  var filterGroup = $select.attr('value-group');
  // set filter for group
  filters[ filterGroup ] = event.target.value;
  // combine filters
  var filterValue = concatValues( filters );
  // set filter for Isotope
  $grid.isotope({ filter: filterValue });
});

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}

Answer 1

我发现自己在html中缺少value-group属性。

同位素多级过滤不起作用

1 个答案: