jquery-isotopeフィルタ

Question

アイソトープで項目をフィルタリングしようとしています。これらの項目は異なる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; 

    }); 

}); 

私が間違って何をしているのですか？完全なコードでは、事前

マウロ

Answer 1

で

おかげで、これを答えるために容易になるだろう。

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

また、これがjavascriptのすべてである場合、間違った順序でisotopeを呼び出すことになります。つまり、アイソトープを初期化する前にアイテムを再読み込みしようとしています。

を修正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; 
}); 

私はあなたに結果を表示するためにa working jsFiddleを設定しました。