旧的 Jquery 过滤器在最新版本 1.7.2 中不起作用答案

【问题标题】：Old Jquery filter not working in latest version1.7.2旧的 Jquery 过滤器在最新版本 1.7.2 中不起作用
【发布时间】：2012-06-08 07:04:42
【问题描述】：

我的应用程序中有标签导航的工作副本，我尝试将 jquery 更新为 latest(1.7.2)，为此我从 jquery 网站下载了 jquery-1.7.2.min.js。更新后，以下行无法按预期工作tabContainers.hide().filter(':member').show();

这里是完整的 jquery 方法。

                $(function () {
                var tabContainers = $('div.tabs > div');
                tabContainers.hide().filter(':member').show();

                $(window).bind('hashchange', function () {
                    var hash = window.location.hash || '#member';        
                    tabContainers.hide();
                    tabContainers.filter(hash).show();
                    $('div.tabs ul.tabNavigation a').removeClass('selected');
                    $('a[hash=' + hash + ']').addClass('selected');
                   document.getElementById("submitform").action="newaction.action"+hash;
                });

                $(window).trigger( "hashchange" );
            });

这里是html部分

                <ul class="tabNavigation">
                    <li><a href="#member">Tab1 </a></li>
                    <li><a href="#tab2">tab2</a></li>
                    <li><a href="#tab3">tab3</a></li>
               </ul>
               <div id="member">content goes here</div>
               <div id="tab2 . . .

更新：将 :member 更改为 #member 或 :first 加载第一个 div 的内容，但仍然没有选择第一个 li。（成员选项卡）

【问题讨论】：

在basic filters 列表中api.jquery.com/category/selectors/basic-filter-selectors，我没有找到:member 过滤器。
在更新之前它是如何工作的？
@Joy 这里的成员是第一个选项卡（li 元素）的 id 仅供参考：它正在使用 v1.3.1。
@gnanz 那么它应该是#member。它也不应该与 v1.3.1 一起使用，你能分享任何 url 以便我们检查吗？
将 tabContainers.hide().filter(':member').show(); 更改为 tabContainers.hide().filter('#member').show(); 即可。你也可以使用tabContainers.hide().filter(':first').show();

标签： javascript jquery html tabnavigator

【解决方案1】：

首先：使用有效的 hashchange 处理程序，tabContainers.hide().filter(':member').show(); 行将在 $(window).trigger("hashchange"); 触发时无效。因此，任何修复tabContainers.hide().filter(':member').show(); 的尝试都是徒劳的，可以删除该声明。

第二：location.hash 存在跨浏览器问题，即某些浏览器返回一个带有前导“#”的字符串，而有些则没有。这需要对返回的字符串进行规范化。

考虑到这些因素，您不妨试试：

$(function() {
    var tabContainers = $('div.tabs > div'),
        submitform = $("#submitform");

    $(window).on('hashchange', function () {
        var hash = (location.hash=='' || location.hash=='#') ? '#member' : location.hash;
        var hashNormalized = (hash.match(/^#/)) ? hash : '#'+hash;
        tabContainers.hide().filter(hashNormalized).show();
        $('div.tabs ul.tabNavigation a').removeClass('selected').filter(function() {
            return this.hash == hashNormalized;
        }).addClass('selected');
        submitform.attr('action', 'newaction.action' + hashNormalized);
    }).trigger('hashchange');
});

在 Opera 11.64 和 IE9 中测试。 一定要在FF中测试

见DEMO

.filter(function(){...}) 过滤锚点的方法应该可以避免 jQuery 版本之间的差异。

【讨论】：

【解决方案2】：

检查此fiddle .对于 1.3.2 和更早的版本，只有 filter('#id') 有效，但 filter(':id') 无效。我不确定它对您的效果如何。

将tabContainers.hide().filter(':member').show(); 更新为tabContainers.hide().filter('#member').show()；

【讨论】：

是的，#member 和 :first 都显示第一个 div 内容-所以这部分没问题，但仍然没有选择成员 li，$('div.tabs ul.tabNavigation a').removeClass('selected'); $('a[hash=' + hash + ']').addClass('selected'); 这些行是否需要更新
试试$('a[href=' + hash + ']').addClass('selected');
@AhamedMustafaM 是的，href= 有效，顺便说一句，您知道为什么 hash= 无效
因为<a> 元素没有名为hash 的属性
以前 :memeber 和 hash= 都有效。这是Jquery1.3.1 file-我在项目中使用的文件。

【解决方案3】：

你必须使用这个

 tabContainers.hide().filter('#member').show();

或

tabContainers.hide().filter(':first').show();

显示第一个 id 为 member 的 div。

并突出显示对应的a

改变这个

$('a[hash=' + hash + ']').addClass('selected');

到

$('a[href=' + hash + ']').addClass('selected');

因为hash不是属性名，所以是href。

【讨论】：