如何使用'mixitup'插件自定義多重過濾？

Question

我正在使用jQuery插件MixItUp對我擁有的內容列表進行過濾。

該插件開箱即用地提供了一個multiFilter，但問題是它顯示了所有內容，然後當您單擊其中一個篩選器時，它會將其從列表中刪除，而我希望它在您選擇時其中一個過濾器，它只顯示一個。如果您點擊另一個，它也會顯示相關內容。 There's a demo與我想要的相似，但它比我需要的更復雜 - 它有兩個類別的過濾器，我只需要一個。

在演示中，他們不使用'multiFilter'選項。相反，他們似乎定義了「過濾器」選項的字符串，然後根據點擊過濾器將其吐出。我曾嘗試解構他們所做的事情，並將其改造成我想要的樣子，但未能真正獲得任何地方。

基本上我迷路了，所以希望有人以前玩過這個插件。我只想在正確的方向踢一腳。我是否需要編寫自定義點擊功能並忘記使用multiFilter，嘗試設置過濾器字符串，還是可以自定義默認multiFilter？

There's a fiddle here with the plugin js added and the default multiFilter functionality

HTML

<div id="filter"> 
    <span>Filter</span> 
    <ul class="filter-list"> 
     <li data-filter="all" class="filter active"><a href="#">All</a></li> 
     <li data-filter="lemon" class="filter"><a href="#">Lemon</a></li> 
     <li data-filter="orange" class="filter"><a href="#">Orange</a></li> 
     <li data-filter="apple" class="filter"><a href="#">Apple</a></li> 
    </ul> 
</div> 

<ul id="grid"> 
    <li class="mix lemon"> 
     <h3>Lemon</h3> 
     <p>Some text here</p> 
    </li> 
    <li class="mix orange"> 
     <h3>Orange</h3> 
     <p>Some text here</p> 
    </li> 
    <li class="mix apple"> 
     <h3>Apple</h3> 
     <p>Some text here</p> 
    </li> 
</ul> 

JS

$('#grid').mixitup({ 
    multiFilter: 'true', 
    showOnLoad: 'lemon orange apple' 
}); 

Answer 1

我最終通過腳本從National Parks demo去和調整它，直到我得到了我想要的東西。

我的腳本就這樣結束了，以防其他人想要這個。

$(function() { 

    // INSTANTIATE MIXITUP 

    $('#grid').mixitup({ 
     effects: ['fade', 'blur'] 
    }); 

    // HANDLE MULTI-DIMENSIONAL CHECKBOX FILTERING 

    var $filters = $('#filters').find('li'); 
    var filterString = 'all'; 

    // Bind checkbox click handlers: 

    $filters.on('click', function() { 
     var $t = $(this), 
     filter = $t.attr('data-filter'); 

     if (filter == 'all') { 
      // If "all" 
      if (!$t.hasClass('active')) { 
       // if unchecked, check "all" and uncheck all other active filters 
       $t.addClass('active').siblings().removeClass('active'); 
       // Replace entire string with "all" 
       filterString = 'all'; 
      } 
     } else { 
      // Else, uncheck "all" 
      $t.siblings('[data-filter="all"]').removeClass('active'); 
      // Remove "all" from string 
      filterString = filterString.replace('all', ''); 

      if (!$t.hasClass('active')) { 
       // Check checkbox 
       $t.addClass('active'); 
       // Append filter to string 
       filterString = filterString == '' ? filter : filterString + ' ' + filter; 
      } else { 
       // Uncheck 
       $t.removeClass('active'); 
       // Remove filter and preceeding space from string with RegEx 
       var re = new RegExp('(\\s|^)' + filter); 
       filterString = filterString.replace(re, ''); 
      }; 
     }; 

     // Reset to all if none are active 
     if ($filters.filter('.active').size() == 0) { 
      $filters.filter('[data-filter="all"]').addClass('active'); 
      filterString = 'all'; 
     } 

     $('#grid').mixitup('filter', [filterString]) 
    }); 

}); 

Answer 2

您是否嘗試過設置選項 「FilterLogic」 到 「和」？

http://mixitup.io/#FilterLogic

Answer 3

那麼它很容易，讓我們說你的容器的ID爲「混合容器」和要顯示僅2個元素「1類」和「類-2 「：

if($('#mix-container').length != 0){ 
    $('#mix-container').mixItUp(
     { 
      load: { 
       filter: '.category-1, .category-2' 
      } 
     } 
    ); 


    //To avoid adding ".active" class to your default filters each time you click on a button 
    var ok=true; 

    //This function is triggred every time you click on a button (after mixitup loads all the container) 
    $('#mix-container').on('mixEnd', function(e, state){ 
     if(ok == true){ 
      $("ul.option-set li[data-filter='.category-1']").addClass('active'); 
      $("ul.option-set li[data-filter='.category-2']").addClass('active'); 
      ok = false; 
     } 
    }); 
}