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

我試圖結合使用Isotope插件的幾個過濾器類型：自由文本搜索，多選，單選（3個獨立的組）。同位素組合過濾器返回多選，單選和自由文本的結果

我甚至沒有精通JS/jquery，這就是爲什麼我一直依靠下面的例子（都由大衛DeSandro提供，我相信）來得到我想要的結果。

這是我codepen例如：https://codepen.io/jawtt/pen/pPaxzR

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

正如你所看到的，這絕對不是我的綁定多選擇濾波器正確的方法。我知道.on（點擊）方法不考慮未選定的項目。我知道我需要一個存儲輸入（複選框類型）字段值的變量，並且每次這些字段值更改時都會更新它。然後我需要以某種方式引用該變量在下面的「初始化同位素」功能：

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）中的任何元素與數據過濾器值之後返回組合搜索結果。

任何幫助和修復的解釋表示讚賞！

來源

2017-05-10 jawtt

有一點幫助，我終於得到了這個工作。看看這裏的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'; 
    } 

    });

來源

2017-05-18 20:50:19 jawtt

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

回答

相關問題