javascript - 未捕获的类型错误 : Cannot read property 'substr' of undefined - old Jquery

Question

我正在更新一个使用 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);
    }
});

Answer 1

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

• 您没有使用 var 来声明局部变量。这是一个你绝不能犯的大错误。
• 您可以使用全局变量(例如$nCurrentActive、$nav、scrolling)来保存状态。不要那样做。是的，我知道这很方便。只是不要这样做。
• 您可以使用 $ 为不包含 jQuery 对象的变量添加前缀($inview、$link)。不要这样做。
• 您将 jQuery 调用的结果与 null 进行比较。这是没有用的，因为 jQuery 调用永远会导致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);
});

其他说明:

• 您似乎没有使用好的变量名称。仔细思考变量名称是否真正反射(reflect)了变量所包含的内容。
• 使用 CSS 类 ($(".navLink")) 比 $("*[id^=nav]") 方式更好)。
• 您不需要也不应该使用像 $nCurrentActive 这样的全局变量。使用 $(".navLink.active")，这就是类的用途。
• 为什么要如此复杂地摸索 ID 和部分 ID？如果您的 HTML 结构使得您可以简单地执行 $('section:in-viewport a.primarySectionLink') 来选择主部分链接，不是更好吗？
• 避免多层嵌套 if 语句的一种方法是在明确不满足函数的前提条件时尽早返回(如上所示)。
• 您不必调用 offMenu() 和 onScrollMenu()。让菜单自己处理窗口滚动事件。为什么要在这两个函数之间建立依赖关系？
• 您不处理视口(viewport)中存在多个部分的情况。