2

このjQueryアイソトープフィルタリングにカスタムクラスを追加して、アイソトープからフィルタリングされたアイテムをカウントするにはどうすればよいですか？

    $(function(){
var $container = $('#wrap-planspiel'),
      filters = {};

  $container.isotope({
        animationEngine : 'css',
        itemSelector : '.hexblock'
  });

  // filter buttons
  $('select').change(function(){
    var $this = $(this);

    // store filter value in object
    // i.e. filters.color = 'red'
    var group = $this.attr('data-filter-group');

    filters[ group ] = $this.find(':selected').attr('data-filter-value');
    // console.log( $this.find(':selected') )
    // convert object into array
    var isoFilters = [];
    for ( var prop in filters ) {
      isoFilters.push( filters[ prop ] )
    }
    console.log(filters);
    var selector = isoFilters.join('');
    $container.isotope({ filter: selector });
    return false;
  });

      $('.filter a').click(function() {
          var $this = $(this);
          if ( $this.hasClass('selected') ) {
        return;
      }

      var $optionSet = $this.parents('.option-set');
      // change selected class
      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');
          var group = $this.parent().data('filter-group');
          filters[ group ] = $this.data('filter-value');
          var isoFilters = [];
            for ( var prop in filters ) {
              isoFilters.push( filters[ prop ] )
            }
            console.log(filters);
            var selector = isoFilters.join('');
            $container.isotope({ filter: selector });
            return false;
      });      

});

desandroの例がありますが、すべてのフィルターをリセットした後もクラスは残ります：http: //jsfiddle.net/desandro/3nY9V/

4

3 に答える 3

2

OK、理解が遅くて申し訳ありません。Chrome の devtools で確認してください。そう：

  1. 初めてページ (サンドボックスまたはフィドル) をロードすると、28 の Isotope 項目がすべて表示されます。たとえば、アイテムには「製品要素 flutlicht w-100w warmwhite isotope-item」クラスがありますが、フィルタリングがまだ行われていないため、「is-filtered」クラスを持つ要素はありません。
  2. 次に、たとえば、ドロップダウン メニューでFlutlichtを選択します。
  3. 現在、アイテムには以前のクラスに追加された「is-filtered」クラスもあります
  4. 次に、ドロップダウン メニューからAlle Leuchtenartenを選択します。
  5. これで、ページは1.のように見えますが、アイテムにはまだ「is-filtered」クラスがあります

これは驚くことではありません。なぜなら、あなたは常にフィルター関数の中にいるので、すべての項目が実際にフィルター処理されます - しかし、Alle LeuchtenartenとAlle LichtfarbenとAlle Leistungenについてはフィルター処理されるため、28 個の項目すべてがページに初めてロードされたばかりです:)しかし、なぜそれについて心配する必要がありますか？私が何を意味するか分かりますか？

別の問題が見つかりました: 上記を実行すると、28 個のアイテムすべてを表示するために戻ったときに、ボックス内のアイテム間に隙間ができることがあります。どこかで reLayout を呼び出す必要があるか、ビューアに依存してウィンドウのサイズを変更し、レイアウトの塗りつぶしメカニズムを開始する必要があります。

于 2012-08-03T09:06:42.320 に答える
2

この正確な例 (目に見えるアイテムをカウントする) がisotope docsに記載されていることがわかりました。

$container.isotope( 'on', 'layoutComplete',
  function( isoInstance, laidOutItems ) {
    console.log( 'Isotope layout completed on ' +
      laidOutItems.length + ' items' );
  }
);
于 2015-02-28T07:11:48.363 に答える
2

http://jsfiddle.net/3nY9V/1/のように、フィルタリングされたアイテムを単純に数えることができます。

于 2012-07-27T20:14:33.707 に答える