Question

我正在尝试使用Isotope插件组合几种过滤器类型：自由文本搜索，多选，单选（3个单独的组）。

我甚至不熟悉JS / jquery，这就是为什么我一直依赖以下的例子（我相信大卫DeSandro提供的）来获得我想要的结果。

这是我的代码集示例：https://codepen.io/jawtt/pen/pPaxzR

$('#select').on( 'click', 'input', function() {
selectFilter = $( this ).attr('data-filter');
console.log(selectFilter)
$grid.isotope();
});

正如您所看到的，这绝对不是绑定多选过滤器的正确方法。我知道.on（click）方法不考虑未选择的项目。我知道我需要一个存储输入（复选框类型）字段值的变量，并在每次字段值更改时更新。然后我需要以某种方式在下面的'init Isotope'函数中引用该变量：

var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
  layoutMode: 'fitRows',
  filter: function() {
    var $this = $(this);
    var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
    var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
    var selectResult = selectFilter ? $this.is( selectFilter ) : true;
    return searchResult && buttonResult && selectResult;
  }
});

您会注意到我的codenpen js示例底部注释掉的代码。我理解这是如何工作的，但我无法将其纳入我现有的例子中。

最终结果：我希望搜索字段，按钮过滤器和选择过滤器在使用数据过滤器值查询同位素网格（.grid）中的任何元素后返回组合搜索结果。

对此修复程序的任何帮助和解释表示赞赏！

Answer 1

在一点帮助下，我终于开始工作了。在这里看一下Codepen： https://codepen.io/jawtt/pen/pPaxzR

 function setCustomFilter() {
  var qsRegex = $('#quicksearch').val();
  console.log("qsregex:" + qsRegex);
  $('.element-item').removeClass('show');
  // if( $('.element-item').text().match(qsRegex) ) {
  //   $('.element-item').addClass('show');
  // }
  searchFilter = '';
  $('.element-item').each(function (index) {
    if (qsRegex == '') {
      $('.element-item').eq(index).addClass('show');
      searchFilter = '.show';
    } else  if ( $(this).text().toLowerCase().indexOf(qsRegex) >= 0) {
      console.log($(this).text());
      $('.element-item').eq(index).addClass('show');
      searchFilter = '.show';
    }

  });

同位素组合过滤器可返回多选，单选和自由文本的结果

1 个答案: