0

同位体でアイテムをフィルタリングしようとしています。これらのアイテムは異なる div 内にありますが、何らかの理由でフィルターは最初の div に対してのみ機能します。ここに私のコードがあります:

<div id="articles">
   <div class="article-wrap">
      <div class="article cat-1"></div>
      <div class="article cat-2"></div>
      <div class="article cat-3"></div>
      ...
   </div>
   <div class="article-wrap">
      <div class="article cat-1"></div>
      <div class="article cat-2"></div>
      <div class="article cat-3"></div>
      ...
   </div>
</div>

私のJavaScript：

$(document).ready(function() {

   $('#articles .article-wrap').isotope( 'reloadItems' ).isotope({sortBy: 'class'});

   $('#filters li a').click(function(){

            var selector = $(this).attr('data-filter');

            $('#articles .article-wrap').isotope({ filter: selector });

            return false;

   });

});

私は何を間違っていますか？

前もって感謝します

マウロ

4

1 に答える 1

1

完全なコードを使用すると、これに答えるのが簡単になります。

現在のコードにはフィルター リンクがありません。問題は、単にセレクターの前に$('#filters li a')a を追加するのを忘れていることです。.

また、これが JavaScript のすべてである場合は、アイソトープを間違った順序で呼び出しています。つまり、アイソトープを初期化する前に項目をリロードしようとしています。

修正された JS は次のようになります。

// Only the line below has been altered, the rest is shown for completeness' sake
$('#articles .article-wrap').isotope({sortBy: 'class'}).isotope( 'reloadItems' );

$('#filters li a').click(function(){
    var selector = '.' + $(this).attr('data-filter');

    $('#articles .article-wrap').isotope({ filter: selector });

    return false;
});

結果を表示するために、動作する jsFiddleをセットアップしました。

于 2013-01-03T14:15:25.820 に答える