未捕获的类型错误：无法读取未定义的属性“substr” - 旧 Jquery答案

【问题标题】：Uncaught TypeError: Cannot read property 'substr' of undefined - old Jquery未捕获的类型错误：无法读取未定义的属性“substr” - 旧 Jquery
【发布时间】：2015-01-20 09:40:16
【问题描述】：

我正在更新一个使用 jquery-1.4.3.min.js 的旧项目。这干扰了我正在研究的一些新东西，所以我不得不用最新版本替换它，现在我得到了 Uncaught TypeError: Cannot read property 'substr' of undefined。

研究这个已经有一段时间了，我很难过。非常感谢任何帮助！

它的来源

$link = $('a[hash=#' + $inview + ']').parent().attr('id').substr(4);

如果需要，这里是全部内容

 $(window).scroll(function() {
    $inview = $('section:in-viewport header').parent().attr('id');
    if ($('a[hash=#' + $inview + ']') !== null) {
        $link = $('a[hash=#' + $inview + ']').parent().attr('id').substr(4);
    }

    if ($link != $nCurrentActive && scrolling == 1) {
        $nav.removeClass('active');
        offMenu($nCurrentActive);
        $nCurrentActive = $link;
        $('#nav-'+$nCurrentActive).addClass('active');
        onScrollMenu($nCurrentActive);
    }
});

【问题讨论】：

嗨@stanced，你能提供一些HTML吗？
您可能希望正确转义属性选择器...如果您的 ID 包含未转义的 '、" 或 [space] 字符，这些字符将导致属性选择器无效。

标签： javascript jquery

【解决方案1】：

您的代码中有多个错误。只修复其中一个是没有用的。

您没有使用var 来声明您的局部变量。这是一个你绝不能犯的大错误。
您使用全局变量（如$nCurrentActive、$nav、scrolling）来保存状态。不要那样做。是的，我知道这很方便。只是不要。
您使用$ 为不包含jQuery 对象的变量添加前缀（$inview、$link）。不要那样做。
您将 jQuery 调用的结果与null 进行比较。这是没用的，因为 jQuery 调用 never 会导致 null。
您在函数结果上调用 substr() 而不检查该函数实际上是否返回了某些东西 ($(...).attr("id").substr(...))。 这就是您看到的错误的根源。

更好：

$(window).scroll(function() {
    var sectionId, sectionLinkId, navId;

    sectionId = $('section:in-viewport header').parent().attr('id');
    if (!sectionId) return;

    sectionLinkId = $('a[hash=#' + sectionId + ']').parent().attr('id');
    if (!sectionLinkId) return;

    navId = sectionLinkId.substr(4);
    offMenu(navId);
    $("*[id^=nav]").removeClass("active").filter("#nav+" + navId).addClass("active");
    onScrollMenu(navId);
});

其他说明：

您似乎没有使用好的变量名。如果变量名称实际上反映了变量所包含的内容，请仔细考虑。
使用 CSS 类 ($(".navLink")) 比 $("*[id^=nav]") 更好方式。
您不需要也不应该使用像$nCurrentActive 这样的全局变量。使用$(".navLink.active")，这就是类的用途。
为什么要对 ID 和部分 ID 进行如此复杂的摸索？如果您的 HTML 结构可以简单地通过 $('section:in-viewport a.primarySectionLink') 选择主要部分链接，那不是更好吗？
避免多级嵌套if 语句的一种方法是在很明显不满足函数的先决条件时提前返回（如上所示）。
您不必致电offMenu() 和onScrollMenu()。让菜单自己处理 Window 滚动事件。为什么要在这两个函数之间建立依赖关系？
您不会处理视口中有多个部分的情况。

【讨论】：