jQuery：URLハッシュ/フラグメント識別子を使用してアイテムを表示/非表示

Question

data-filter属性に基づいてアイテムを表示/非表示する基本的なjQueryのクリック機能があります.Iopotのようなプラグインを使用せず、単純な表示/非表示機能URLハッシュ（存在する場合）を使用してフィルタを適用し、対応するフィルタボタンに「アクティブ」クラスを追加することもできます。私は、以下の私のアプローチで

<div class="item"> 
    <a href="#" class="item-anchor" data-filter="apples">Item</a> 
</div> 

：マークアップで

は、そのような関連 data-filterと anchor要素を含むそれぞれの「アイテムのクラスを持つdiv要素のグリッドがあり、 、URLのハッシュを取得し、そのアンカーハッシュ文字列に一致しないすべての要素を隠し、そしてマッチング .filter-button要素にアクティブなクラスを追加しようとしている：

$(window).load(function() { 
    var hash = window.location.hash.substring(1); 

    if (hash) { 

     $('.item').each(function() { 
      $(this).children('.item-anchor').data('filter') !== hash;    
     }).hide(); 

     $('a.filter-button[href="hash"]').addClass('active'); 

    } 
}); 

私はthis threadから、いくつかの支援を得たが、私の場合のI少し違う。面白いことに、上のコードはすべて.item divsを非表示にしており、.activeクラスが必要に応じて追加されていないため、ここで間違っています。いかなる援助も大変ありがとうございます。それ以上の明確化が必要な場合は、私にお知らせください。

Answer 1

各関数ではなく、filter関数を呼び出す必要があります。さらに、フィルタリングするブール値を元に戻す必要があります。あなたのリンク.activeがどういうものかはっきりしていませんが、私はあなたがハッシュでそれをフィルタリングしたいと確信しています。

$(window).load(function() { 
    var hash = window.location.hash.substring(1); 
    if (hash) { 
     $('.item').filter(function() { 
      return $(this).children('.item-anchor').data('filter') !== hash;    
     }).hide(); 

     $('a.filter-button[href="#'+hash+'"]').addClass('active'); 
    } 
});