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

Posted 2023-05-09

【中文标题】使用 Jquery 过滤功能锚定标签和浏览器历史记录

【英文标题】：Anchor tags and browser history with Jquery filter function

【发布时间】：2012-03-31 12:40:22

【问题描述】：

我正在处理一个带有用于过滤页面上产品的导航的页面。当单击链接和按下浏览器后退按钮时，我使用 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');
            
        );
    

);

非常感谢您指出正确的方向。

【参考方案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();
);

【讨论】：

感谢您的帮助 - 我需要稍微调整一下 .replace('#','');破坏了 hashchange 函数，所以我必须想办法让它跨浏览器友好，但除此之外，这正是我所追求的。非常感谢

如果删除 # 会破坏它，那么如果 # 尚不存在，则需要在前面添加。比如：hash = (location.hash.match(/^#/)) ? location.hash : ('#'+location.hash);