同位素 V2：禁用空过滤器

Question

我已经让 Isotope 与多个选择过滤器一起使用：https://codepen.io/share-a-dream/pen/dRXgyW

但我想实时禁用 select 中不会提供任何结果的选项，因此用户永远不会看到空结果。

我用这个函数取回我的元素：

 $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，在同位素 LOADED 之前运行的函数，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>