同位素V2：禁用空濾器

Question

我有同位素有多個選擇濾波器工作：https://codepen.io/share-a-dream/pen/dRXgyW

但我想實時禁用選擇該選項，將不會提供任何結果，因此用戶不會看到空結果。

我用這個功能找回我的元素：

$grid.isotope('on', 'layoutComplete', function() { 

    var elems = $grid.isotope('getFilteredItemElements'); 
    console.log(elems.length + ' filtered items' ); 


    $(elems).each(function() { 
     var filterClass = $(this).attr("class"); 
     var filterClassArray = filterClass.split(' '); 
     console.log(filterClassArray); 

     jQuery.each(filterClassArray, function(i, val) { 
      $('[data-filter=".'+ val + '"]').removeAttr('disabled', 'disabled'); 
     }); 

    }); 

}); 

我得到類的列表，但它不是完美的工作。

Answer 1

編輯：

我刪除了阿根廷從HTML源代碼，而現在的功能removeEmpty，運行同位素加載之前的一個，執行console.log是一來就是失蹤，從下拉菜單中刪除...

var $grid = $('.filtr-container').isotope({ 
 
    itemSelector: '.filtr-item', 
 
    isInitLayout: false 
 
}); 
 

 
// store filter for each group 
 
var filters = {}; 
 

 

 
// function to remove empty dropdown filters 
 
function removeEmpty(){ 
 
    var DROP = $('select option:not([data-filter=""])'); 
 
    // list of all class in html 
 
    var strall = ''; $('.filtr-item').each(function(el){ strall += $(this).attr('class') }); 
 
    // remove select if not in strall.. TODO : needs improvement, this is kind a hack 
 
    DROP.each(function(el){ 
 
    var nowfilter = $(this).attr('data-filter').replace('.', ''); // co_kenya 
 
    if(strall.indexOf(nowfilter) == -1){ 
 
     console.log('this one is missing ' + nowfilter); 
 
     $(this).remove(); 
 
    } 
 
    }); 
 
} 
 

 

 
$grid.on('layoutComplete', function() { 
 
    // before layout, try to filter dropdown 
 
    removeEmpty(); 
 
}); 
 
// now make layout 
 
$grid.isotope('layout');

.ngos { 
 
    padding:20px; 
 
    border:1px solid black; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://unpkg.com/isotope-layout/dist/isotope.pkgd.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="zone filter clearfix"> 
 
     <div class="col-md-4"> 
 
     <h3>The cause:</h3> 
 
     <label> 
 
        <select data-filter-group="category"> 
 
         <option data-filter="" selected> All </option> 
 
         <option data-filter=".ca_Education"> Education</option> 
 
         <option data-filter=".ca_Environment"> Environment</option> 
 
         <option data-filter=".ca_Health"> Health</option> 
 
        </select> 
 
       </label> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <h3>The country:</h3> 
 
     <label> 
 
        <select data-filter-group="country"> 
 
         <option data-filter="" selected> All </option> 
 
         <option data-filter=".co_Argentina"> Argentina</option> 
 
         <option data-filter=".co_Bolivia"> Bolivia</option> 
 
         <option data-filter=".co_Chile"> Chile</option> 
 
         <option data-filter=".co_Kenya"> Kenya</option> 
 
         <option data-filter=".co_Madagscar"> Madagscar</option> 
 
         <option data-filter=".co_SouthAfrica"> South Africa</option> 
 
        </select> 
 
       </label> 
 
     <div style="display: none" class="btn">Search</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="filtr-container js-ngo-container"> 
 
    <div class="ngos filtr-item co_Bolivia ca_Education" data-category=""> 
 
     <div class="col-lg-6 col-sm-6 col-xs-12"> 
 
     <div class="zone content"> 
 
      <h2>co_Bolivia ca_Education</h2> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="ngos filtr-item co_SouthAfrica ca_Health" data-category=""> 
 
     <div class="col-lg-6 col-sm-6 col-xs-12"> 
 
     <div class="zone content"> 
 
      <h2>co_SouthAfrica ca_Health</h2> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="ngos filtr-item co_Chile ca_Environment" data-category=""> 
 
     <div class="col-lg-6 col-sm-6 col-xs-12"> 
 
     <div class="zone content"> 
 
      <h2>co_Chile ca_Environment</h2> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="ngos filtr-item co_Madagscar ca_Environment" data-category=""> 
 
     <div class="col-lg-6 col-sm-6 col-xs-12"> 
 
     <div class="zone content"> 
 
      <h2>co_Madagscar ca_Environment</h2> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="ngos filtr-item co_Kenya ca_Environment" data-category=""> 
 
     <div class="col-lg-6 col-sm-6 col-xs-12"> 
 
     <div class="zone content"> 
 
      <h2>co_Kenya ca_Environment</h2> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>