Question

我正在尝试使用javascript在同位素中创建过滤器，但没有从official example重写jQuery版本的运气

// external js: isotope.pkgd.js

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.color-shape'
});

// 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;
}

My vanillaJS code

// external js: isotope.pkgd.js, babel-core

// addEventListener Shorthand
function addEvent(element, evnt, funct) {
  if (element.attachEvent) {
    return element.attachEvent(`on${evnt}`, funct);
  }
  return element.addEventListener(evnt, funct, false);
}

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


const filtersContainer = document.querySelector('.o-filter-container');
const filtersEl = document.querySelector('#filters');
// store filter for each group
const filters = {};

// init Isotope
const iso = new Isotope(filtersContainer, {
  itemSelector: '.o-filter-item',
});

addEvent(filtersEl, 'change', function(event) {
  const selectEl = event.target;
  // get group key
  const filterGroup = selectEl.getAttribute('value-group');
  // set filter for group
  filters[filterGroup] = event.target.value;
  // combine filters
  const filterValue = concatValues(filters);
  // set filter for Isotope
  iso.arrange({
    filter: () => filterValue,
  });
  iso.arrange();
});

我不确定我的代码有什么问题。我花了一些时间阅读文档（其中更专注于jQuery解决方案），论坛和github问题，但找不到任何答案。我注意到，方法.arrange()与jQuery的.isotope()等效，因此您必须将函数传递给{filter}而不只是值。

所以我希望有人指出我要解决这2天奋斗的方向！

Answer 1

好吧，我明白了-两个问题：

<option value="">All</option>的值应该为空
按年份作为类进行过滤，例如.2019会导致错误：

matches-selector.js:50 Uncaught DOMException: Failed to execute 'matches' on 'Element': '.2019' is not a valid selector.
    at matchesSelector (http://localhost:3000/wp-content/themes/myTHEME/dist/scripts/app.bundle.js:4064:33)
    at http://localhost:3000/wp-content/themes/myTHEME/dist/scripts/app.bundle.js:482:14
    at SubClass.proto._filter (http://localhost:3000/wp-content/themes/myTHEME/dist/scripts/app.bundle.js:444:23)
    at SubClass.proto.arrange (http://localhost:3000/wp-content/themes/myTHEME/dist/scripts/app.bundle.js:368:25)
    at HTMLDivElement.<anonymous> (http://localhost:3000/wp-content/themes/myTHEME/dist/scripts/app.bundle.js:3883:11)
matchesSelector @ matches-selector.js:50
(anonymous) @ isotope.js:289
proto._filter @ isotope.js:251
proto.arrange @ isotope.js:175
(anonymous) @ filter.js:41

因此添加一个.year-可以解决问题！

在香草JS中使用select进行同位素过滤无法正常工作

1 个答案: