'mixitup'플러그인으로 멀티 필터링을 맞춤 설정하는 방법은 무엇입니까?

Question

jQuery 플러그인 MixItUp을 사용하여 내가 가지고있는 콘텐츠 목록에서 필터링을 얻고 있습니다.

플러그인은 멀티 필터를 기본적으로 제공하지만 문제는 모든 항목이 표시되고 필터 중 하나를 클릭하면 목록에서 제거되는 반면 원하는 항목을 선택하면 필터 중 하나는 그 중 하나만 보여줍니다. 다른 것을 클릭하면 그 내용도 표시됩니다. There's a demo에는 내가 원하는 것과 비슷한 것이 있지만, 필자가 필요로하는 것보다 더 복잡합니다. 필터에는 두 가지 범주가 있습니다. 단지 하나만 필요합니다.

데모에서는 '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; 
     } 
    }); 
}