Jquery 필터 함수로 앵커 태그 및 브라우저 기록

Question

페이지에서 제품을 필터링하는 탐색 기능이있는 페이지에서 작업하고 있습니다. jQuery hashchange를 사용하여 링크를 클릭하고 브라우저의 뒤로 버튼을 눌렀을 때 탐색 링크에 현재 상태를 추가하고 제거합니다. 필터() 함수는 탐색 링크를 클릭 할 때만 작동하지만 브라우저의 뒤로 버튼을 클릭하거나 URL 끝에 앵커 태그가 포함되어 있으면 필터 기능을 구현하고 싶습니다.

다음은 페이지에 대한 링크입니다 :

http://dl.dropbox.com/u/20585252/test/index.htm

그리고 여기와 관계있는 것입니다 JQuery와의 절입니다 :

$(document).ready(function(){ 

$(window).hashchange(function(){ 
var hash = location.hash; 

$('#nav a').each(function(){ 
    var that = $(this); 
    that[ that.attr('href') === hash ? 'addClass' : 'removeClass' ]('current'); 
}); 
}) 

$(window).hashchange(); 
filter(); 

}); 


function filter() { 

    $('ul#nav a').click(function() { 


    var filterVal = $(this).attr('rel'); 

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

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

}); 


} 

가 올바른 방향으로 점은 대단히 감사하겠습니다.

Answer 1

음, 조금 까다 롭긴하지만 코드와 약간의 jiggery-pokery를 약간 리팩토링하면 hashchange 핸들러에서 필터를 트리거 할 수 있어야합니다.

아래의 코드가 안된 꽤 잘되지 않을 수도 있지만, 앞서 방법으로 제공해야한다 : 당신의 도움에 대한

$(document).ready(function(){ 
    $(window).hashchange(function(){ 
     var hash = location.hash.replace('#','');//remove # for cross-browser compatibility 
     $('#nav a').each(function(){ 
      var that = $(this); 
      //that[ that.attr('href') === hash ? 'addClass' : 'removeClass' ]('current'); 
      if(that.attr('href') === hash) { 
       that.addClass('current'); 
       filter.call(that);//call filter with '$(this)' as the context 
      } 
      else { 
       that.removeClass('current'); 
      } 
     }); 
    }); 
    function filter() { 
     //Note: 'this' is a jquery object due to the way in which filter is called (in two places). 
     var filterVal = this.attr('rel'); 
     if(filterVal == 'all') { 
      $('ul.product li.hidden').show().removeClass('hidden'); 
     } 
     else { 
      $('ul.product li').hide().each(function() { 
       if(!this.hasClass(filterVal)) { 
        this.hide().addClass('hidden'); 
       } 
       else { 
        this.show().removeClass('hidden'); 
       } 
      }); 
     } 
    } 
    $('ul#nav').on('click', 'a', function(){ 
     filter.call($(this)); 
    }); 
    $(window).hashchange(); 
});