結合使用同位素過濾的元素

Question

我目前使用同位素過濾出版物的列表，但希望能夠將標準的，記載的鏈接過濾器方法與select元素結合起來，因爲我的第二個過濾器列表是相當長。

我正在與被處理兩種不同類型的元件和組合選擇值到一個選項陣列掙扎位。我可以讓過濾器獨立工作（下面的代碼），但他們需要一起工作。我怎樣才能將兩個不同的動作（點擊或更改）和兩個屬性（class =或value =）合併爲一個選項數組傳遞給同位素過濾器？

var $container = $('#library'); 
// select ccskills publications by default 
$container.isotope({ filter: '.ccskills' }); 

var $optionSets = $('#library-options .option-set'), 
$optionLinks = $optionSets.find('a'); 

$optionLinks.click(function(){ 
    var $this = $(this); 
    // don't proceed if already selected 
    if ($this.hasClass('selected')) { 
    return false; 
    } 
    var $optionSet = $this.parents('.option-set'); 
    $optionSet.find('.selected').removeClass('selected'); 
    $this.addClass('selected'); 

    // make option object dynamically, i.e. { filter: '.my-filter-class' } 
    var options = {}, 
    key = $optionSet.attr('data-option-key'), 
    value = $this.attr('data-option-value'); 

    // parse 'false' as false boolean 
    value = value === 'false' ? false : value; 
    options[ key ] = value; 
    $container.isotope(options); 
    return false; 
}); 

    // using the 'chozen' plugin to style my select element 
$(".chzn-select").chosen().change(
    function() { 
     var industry = $("option:selected", this).val(); 
     $container.isotope({filter: industry}); 
    } 
); 

Answer 1

您需要一個多維數組，每個過濾器類型都有一個數組維數。我之前就已經完成了，現場演示示例here！

請參閱here！爲js。

在我的JS文件，你會感興趣的最終函數調用getComboFilters（過濾器）

function getComboFilter(filters) { 
    var i = 0; 
    var comboFilters = []; 
    var message = []; 
    for (var prop in filters) { 
     message.push(filters[ prop ].join(' ')); 
     var filterGroup = filters[ prop ]; 
     // skip to next filter group if it doesn't have any values 
     if (!filterGroup.length) { 
      continue; 
     } 
     if (i === 0) { 
      // copy to new array 
      comboFilters = filterGroup.slice(0); 
     } 
     else { 
      var filterSelectors = []; 
      // copy to fresh array 
      var groupCombo = comboFilters.slice(0); // [ A, B ] 
      // merge filter Groups 
      for (var k=0, len3 = filterGroup.length; k < len3; k++) { 
       for (var j=0, len2 = groupCombo.length; j < len2; j++) { 
        filterSelectors.push(groupCombo[j] + filterGroup[k]); // [ 1, 2 ] 
       } 
      } 
      // apply filter selectors to combo filters for next group 
      comboFilters = filterSelectors; 
     } 
     i++; 
    } 
    comboFilters.sort(); 
    var comboFilter = comboFilters.join(', '); 
    return comboFilter; 
} 

這個函數處理所有的推，拼接和各組濾波器陣列，但使用的排序它，你需要將它添加到您的濾波器程序......好吧我說的常規，但它真正的套路，因爲你似乎調用過濾方法2不同的時間：

$container.isotope({ filter: '.ccskills' }); 

及更高版本：

$container.isotope({filter: .industry}); 

如果您要過濾所有類型的過濾器，您必須知道對方，這意味着它們必須位於同一個javascript外殼內，並且只需要調用過濾器方法一旦在此時間，它會針對您的所有過濾器類型條件進行測試。

使用getComboFilter（過濾器）函數調用組合式過濾器的方法是這樣的：

var $container = $('#library'); 
var comboFilter = getComboFilter(filters); 
$container.isotope({ filter: comboFilter }); 

最後，全面融入你的文件將是somethign這樣的：

var $container = $('#library'); 
var comboFilter = getComboFilter(filters); 
$container.isotope({ filter: comboFilter }); 

// This next part targets all the possible filter items 
// i.e. '.option-set a' just like your example 

$('.option-set a').click(function(){ 
     // exit directly if filter already disabled 
     if ($(this).hasClass('disabled')){ 
      return false; 
     } 
     var $this = $(this); 
     var $optionSet = $(this).parents('.option-set'); 
     group = $optionSet.attr('data-filter-group'); 
     // store filter value in object 
     var filterGroup = filters[ group ]; 
     if (!filterGroup) { 
      filterGroup = filters[ group ] = []; 
     } 
     var comboFilter = getComboFilter(filters); 
     $container.isotope({ filter: comboFilter }); 
}); 
function getComboFilter(filters) { 
    var i = 0; 
    var comboFilters = []; 
    var message = []; 
    for (var prop in filters) { 
     message.push(filters[ prop ].join(' ')); 
     var filterGroup = filters[ prop ]; 
     // skip to next filter group if it doesn't have any values 
     if (!filterGroup.length) { 
      continue; 
     } 
     if (i === 0) { 
      // copy to new array 
      comboFilters = filterGroup.slice(0); 
     } 
     else { 
      var filterSelectors = []; 
      // copy to fresh array 
      var groupCombo = comboFilters.slice(0); // [ A, B ] 
      // merge filter Groups 
      for (var k=0, len3 = filterGroup.length; k < len3; k++) { 
       for (var j=0, len2 = groupCombo.length; j < len2; j++) { 
        filterSelectors.push(groupCombo[j] + filterGroup[k]); // [ 1, 2 ] 
       } 
      } 
      // apply filter selectors to combo filters for next group 
      comboFilters = filterSelectors; 
     } 
     i++; 
    } 
    comboFilters.sort(); 
    var comboFilter = comboFilters.join(', '); 
    return comboFilter; 
} 

希望這幫助別人！演示非常漂亮。