Question

我有一个大型的对象网格，我正在使用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 is undefined”。但我无法弄清楚如何解决它。

Answer 1

好吧，2天后，我设法找到了自己的解决方案。问题是因为imagesLoaded。所以我更换了＆＃34; // init Isotope＆＃34;像这样的部分代码，现在计数正在发挥作用。

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

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

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

具有过滤器计数和imagesLoaded的同位素

1 个答案: