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

Question

我正在尝试使用同位素插件组合几种过滤器类型：自由文本搜索、多选、单选(3 个单独的组)。

我甚至还没有接近精通 JS/jquery，这就是为什么我一直依靠以下示例(我相信这两个示例都由 David 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 同位素"函数中引用该变量：

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

在一点帮助下，我终于让它工作了。 看看这里的代码笔： 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';
}
});