jQuery : URL 해시/단편 식별자를 사용하여 항목 표시/숨기기

Question

단순한 표시/숨기기 기능과 같은 Isotope와 같은 플러그인을 사용하지 않고 data-filter 속성을 기반으로 항목을 표시하거나 숨기는 기본 jQuery 클릭 기능이 있습니다. URL 해시이있는 경우 URL 필터를 사용하여 필터를 적용하고 해당 필터 버튼에 '활성'클래스를 추가하는 것도 좋습니다. 난, 아래에있는 내 접근 방식에서

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

: 마크 업에서

, 그래서 같은 관련 data-filter와 anchor 요소를 포함하는 각각의 '항목'클래스 된 div의 격자,이 그 앵커 해시 문자열과 일치하고, 일치하는 .filter-button 요소에 활성 클래스를 추가하지 않는 모든 요소의 URL 해시를 얻을 숨기기 시도 :

$(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에서 약간의 지원을 가지고,하지만 내 경우에는 내가 조금 다릅니다. 흥미롭게도, 위의 코드는 모두.item divs를 숨기고 .active 클래스를 원하는대로 추가하지 않으므로 여기서 잘못된 부분이 있는지 잘 모르겠습니다. 어떤 도움이라도 대단히 감사 드리며, 더 이상의 설명이 필요하면 알려 주시기 바랍니다.

Answer 1

각 기능 대신 필터 기능을 호출해야합니다. 또한 필터링해야하는 부울을 반환해야합니다. 당신의 링크 .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'); 
    } 
});