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

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

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

1 个答案: