Question

所以我正在玩js-isotope库。到目前为止效果很好，但在特定任务上存在问题。

我有一个代表服装品牌的网格。品牌由起始信组织。

所以看起来像这样：http://towa-online.at/sagmeister/marken/

我创造了2个同位素对象：

alphabet-grid：包含品牌列表的网格项

var $container_alphabet = $( '.sagmeister-brand-grid' ).isotope({
  itemSelector: '.grid-item',
  masonry: {
    gutter: 40,
    columnWidth: 320
  },
  filter          : '*',
  animationOptions: {
    duration: 750,
    easing  : 'linear',
    queue   : false
  }
});

brand-grid：字母表中的每个列表

var $container_brands = $( 'ul.brand-by-letter' ).isotope({
  itemSelector    : '.brand-name',
  layoutMode      : 'vertical',
  filter          : function(){
    var $this = $( this );
    var result_query = search_query ? $this.text().match( search_query ) : true;
    var result_cat   = search_cat ? $this.is( search_cat ) : true;
    return result_query && result_cat;
  },
  animationOptions: {
    duration: 750,
    easing  : 'linear',
    queue   : false
  }
});

我想做的是，在过滤品牌后（工作正常），我正在检查“arrangeComplete” - 事件，如果有些字母可能是emtpy。如果是这样，我在字母网格中的网格项中添加了一个“no-items”类，最后我触发了同位素。

$container_brands.on( 'arrangeComplete', function( event, filteredItems ){
  var $grid_item = $( '#' + event.currentTarget.id ).parent();
  var has_items  = ( filteredItems.length > 0 );

  if ( has_items ){
    $grid_item.removeClass( 'no-items' ).addClass( 'has-items' );          
  } else {
    $grid_item.removeClass( 'has-items' ).addClass( 'no-items' );
  }
  if ( $grid_item.is( ':last-child' ) )
    $container_alphabet.isotope();
});

有人想过这个吗？

Answer 1

所以，我能够自己找到解决方案。谢谢，无论如何，它帮助我描述了问题，并再看看它：）

我的解决方案是稍微改变结构然后我为字母表的网格项添加了自定义过滤器函数，该函数检查是否所有子项都被过滤掉了。如果是这样，请隐藏字母项：）

本周开始不错，就像^^

一样

欢呼声

PS：如果您需要更详细的解释，请随时提出。很乐意帮忙！

将2个不同的嵌套过滤器与同位素

1 个答案: