同位素組合過濾器可返回多選，單選和自由文本的結果

Question

我正在嘗試使用Isotope插件來組合幾種過濾器類型：自由文本搜索，多選，單選（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）方法不能解決未選擇的項目。 我知道我需要一個變量來存儲輸入（復選框類型）字段值，並且每次這些字段值更改時都會更新。 然后，我需要以某種方式在下面的“初始同位素”函數中引用該變量：

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

  });