jquery - 使用 Jquery 过滤功能锚定标签和浏览器历史记录

Question

我正在处理一个带有导航的页面，该导航过滤页面上的产品。当单击链接和按下浏览器后退按钮时，我使用 jQuery hashchange 添加和删除导航链接的当前状态。但是，filter() 函数仅在单击导航链接时才起作用，我想在单击浏览器后退按钮或 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

嗯，有点棘手，但我认为通过对代码的轻微重构和一点点玩闹，您应该能够从 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();
});