-1

我有一个大的对象网格，我用isotope过滤。我正在使用组合过滤器和搜索框，并且我也在使用 imagesLoaded（由于项目数量众多，这是必要的）。一切正常。

我还想打印过滤的项目数。我按照说明here

这是我的代码：

jQuery(document).ready(function($){

// quick search regex
var qsRegex;

// init Isotope
var $grid = $('.grid').imagesLoaded( function() {
    $grid.isotope({
    itemSelector: '.status',
    getSortData: {
        name: '.elemsort',
    },
    sortBy : 'name',
});
});

var iso = $grid.data('isotope');
var $filterCount = $('.filter-count');

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

$('.filtersbutton').on( 'click', '.button', function() {
    var $this = $(this);
    // get group key
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.attr('data-filter');
    // combine filters
    var filterValue = concatValues( filters );
    // set filter for Isotope
    $grid.isotope({ filter: filterValue });
    updateFilterCount();
});

// bind filter on select change
$('.filterstextsearch').on( 'change', '.button-group', function() {
    var $this = $(this);
    // get group key
    var filterGroup = $this.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.find(':selected').attr('data-filter');
    // combine filters
    var filterValue = concatValues( filters );
    // set filter for Isotope
    $grid.isotope({ filter: filterValue });
    updateFilterCount();
    $(':selected', this).addClass('is-checked').siblings().removeClass('is-checked')
});

// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', '.button', function() {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $( this ).addClass('is-checked');
    });
});

// flatten object by concatting values
function concatValues( obj ) {
    var value = '';
    for ( var prop in obj ) {
        value += obj[ prop ];
    }
    return value;
}

// use value of search field to filter
var $quicksearch = $('.isofilter').keyup( debounce( function() {
    qsRegex = new RegExp( $quicksearch.val(), 'gi' );
    $grid.isotope({
        filter: function() {
            return qsRegex ? $(this).text().match( qsRegex ) : true;
        }
    });
    updateFilterCount();
}, 200 ) );

function updateFilterCount() {
  $filterCount.text( iso.filteredItems.length + ' items' );
}

updateFilterCount();    

// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
  var timeout;
  return function debounced() {
    if ( timeout ) {
      clearTimeout( timeout );
    }
    function delayed() {
      fn();
      timeout = null;
    }
    timeout = setTimeout( delayed, threshold || 100 );
  }
}
});

我怀疑它不起作用的原因是我使用了 imagesLoaded？在控制台中，我得到“TypeError：iso 未定义”。但我不知道如何解决它。

4

1 回答 1

0

好吧，2天后，我自己设法找到了解决方案。问题是由于imagesLoaded。所以我像这样替换了代码的“// init Isotope”部分，现在计数正在工作。

// init Isotope
var $grid = $('.breakdown').isotope({
    itemSelector: '.status',
    getSortData: {
        name: '.elementsort',
    },
    sortBy : 'name',
});

$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});

这个选项的问题是现在加载页面比我在加载所有图像后初始化 Isotope 时要慢得多。如果有人对此有解决方案，将不胜感激。

于 2016-10-09T16:52:54.697 回答