Jquery Filter Plugin 빌드 해시 태그 지원

Question

사용자가 "브랜딩"을 클릭 할 때 브랜딩의 클래스 이름이 표시되고 나머지는 숨기기 만하면 내 포트폴리오 페이지에 SUPER 기본 필터링 시스템이 필요했습니다. 사용자가 인쇄물 디자인을 클릭하면 인쇄물 만 출력됩니다.

저는 동위 원소와 퀵 샌드를 사용했지만, 이번에는 효과가없는 매우 기본적인 방법을 원했습니다. 그래서 this script을 사용하기로 결정했습니다. jquery는 매우 간단합니다. 필터 링크 및 표시/숨기기와 동일한 클래스를 가진 포트폴리오 항목을 찾습니다. jquery는 다음과 같습니다.

$('ul#filter a').click(function() { 
    $(this).css('outline','none'); 
    $('ul#filter .current').removeClass('current'); 
    $(this).parent().addClass('current'); 

    var filterVal = $(this).text().toLowerCase().replace(' ','-'); 

    if(filterVal == 'all') { 
     $('ul#portfolio li.hidden').show().removeClass('hidden'); 
    } else { 

     $('ul#portfolio li').each(function() { 
     if(!$(this).hasClass(filterVal)) { 
      $(this).hide().addClass('hidden'); 
     } else { 
      $(this).show().removeClass('hidden'); 
     } 
    }); 
    } 

    return false; 
}); 

내 헤더/nav에는 이러한 필터링 가능한 링크가 모두 포함되어 있습니다. 따라서 nav에서 "작업"아래에는 필터링 가능한 모든 객체가 있습니다. 사용자가 "브랜딩"을 클릭하면 모든 포트폴리오 항목이 표시되며 (브랜딩 항목이 아닌) 작업 페이지로 이동합니다. 이 jquery 스크립트는 해시 태그를 지원하지 않기 때문입니다. 즉, 필터링 된 포트폴리오의 각 상태에는 연관된 URL이 없습니다. 이 기능을 추가하려고하지만 실제로 어디에서 시작해야할지 모르겠습니다.

정확하게 내가 필요한 해결책 인 것처럼 보이는 hashchange plugin가 있음을 발견했습니다. 누군가 해시 태그에 대한 지원을 추가하거나이 해시 변경 플러그인과 함께 사용하는 방법에 대한 도움을받을 수 있습니까? 미리 감사드립니다!

Answer 1

이 문제를 해결하는 가장 좋은 방법이 맞는지는 모르겠지만, 해쉬 태그를 nav의 모든 앵커 링크에 할당하는 방법을 생각해보십시오. 나는 다음과 같은 jQuery를 적용 hten 그리고 그것이 작동되도록하기 :

var thispage = window.location.hash; 

if(thispage == ''){ 
    $('ul#filter li:nth-child(1)').addClass('current'); 
} 
if(thispage == '#brand-id'){ 
    $('ul#filter li:nth-child(2)').addClass('current'); 
} 
if(thispage == '#print'){ 
    $('ul#filter li:nth-child(3)').addClass('current'); 
} 
if(thispage == '#book-and-editorial'){ 
    $('ul#filter li:nth-child(4)').addClass('current'); 
} 
if(thispage == '#web'){ 
    $('ul#filter li:nth-child(5)').addClass('current'); 
} 
if(thispage == '#packaging'){ 
    $('ul#filter li:nth-child(6)').addClass('current'); 
} 
if(thispage == '#exhibit'){ 
    $('ul#filter li:nth-child(7)').addClass('current'); 
} 

var currentpage = thispage.replace('#',''); 

$('ul#portfolio li').each(function() { 
    if(!$(this).hasClass(currentpage)) { 
     $(this).hide().addClass('hidden'); 
    } else { 
     $(this).show().removeClass('hidden'); 
    } 
}); 

아마도 원래 스크립트로 구축, 그것은 비 대한 것,하지만 이것에 대해 갈 수있는 더 좋은 방법은 무엇입니까?