javascript - 带有指向锚点的链接的 href # 引发 jquery 错误

Question

从我网站的主导航链接到我的主页时，我收到此错误：

`Uncaught Error: jquery-1.9.1.min.js:4 Uncaught Error: Syntax error, 
unrecognized expression: ../index.php#home
at Function.st.error (jquery-1.9.1.min.js:4)
at ft (jquery-1.9.1.min.js:4)
at wt (jquery-1.9.1.min.js:4)
at Function.st [as find] (jquery-1.9.1.min.js:4)
at init.find (jquery-1.9.1.min.js:4)
at new init (jquery-1.9.1.min.js:3)
at b (jquery-1.9.1.min.js:3)
at HTMLAnchorElement.<anonymous> (main.js:201)
at Function.each (jquery-1.9.1.min.js:3)
at init.each (jquery-1.9.1.min.js:3)`

以下是一些链接：

<a href='../index.php#home'><span>Home</span></a>
<a href="../index.php#about"><span>About</span></a>
<a href="../index.php#work"><span>Work</span></a>

链接工作正常，并跳转到页面之间的不同部分，但 JavaScript 错误困扰着我。

我对 JavaScript 和 jQuery 还是很陌生，但我正在努力学习并精通它。我只是还没有。我猜这是因为链接中有“#”，而 jQuery 不喜欢它，但是任何关于导致它的原因以及如何修复它的想法都将非常感激。

标签： javascriptjqueryanchor

Answer 1

当我快速单击导航时，我在控制台中看到以下错误：

Uncaught ReferenceError: $target is not defined
    at HTMLAnchorElement.<anonymous> (main.js:31)
    at HTMLAnchorElement.dispatch (jquery-1.9.1.min.js:3)
    at HTMLAnchorElement.v.handle (jquery-1.9.1.min.js:3)

即使堆栈跟踪中引用了 jquery，此错误也独立于 jQuery 发生，并且是 JavaScript 中的错误 - 在此处阅读有关此错误的更多信息：https ://developer.mozilla.org/en-US/docs/Web/JavaScript /参考/错误/未定义

您可以从下往上阅读此特定堆栈跟踪 - 因此您将看到在 jquery-1.9.1.min.js 第 3 行中处理和调度了一个事件（缩小资源中的行在大多数情况下是无用的）然后是匿名的main.js 中的函数在第 31 行被调用并崩溃。

该行的摘录如下：

$('a[href^="#"]').on('click', function (e) {
  e.preventDefault();
  $(document).off("scroll");

  $('a').each(function () {
    $(this).removeClass('active');
  })
  $(this).addClass('active');

  var target = this.hash;
  $target = $(target); # this is line 31
  $('html, body').stop().animate({
    'scrollTop': $target.offset().top+2
  }, 500, 'swing', function () {
    window.location.hash = target;
    $(document).on("scroll", onScroll);
  });
});

在您的情况下，您似乎只是错过了声明变量$target。只要在likevar前面放一个：$target

var $target = $(target);

你的功能应该运行良好。

顺便说一句，有一个很好的调试方法。只需debugger;在错误发生的位置附近添加一个 - 表达式，您就会看到深入的调试信息。喜欢：

---

添加：

如果您检查您遇到的其他错误：

Uncaught Error: jquery-1.9.1.min.js:4 Uncaught Error: Syntax error, 
unrecognized expression: ../index.php#home
at Function.st.error (jquery-1.9.1.min.js:4)
at ft (jquery-1.9.1.min.js:4)
at wt (jquery-1.9.1.min.js:4)
at Function.st [as find] (jquery-1.9.1.min.js:4)
at init.find (jquery-1.9.1.min.js:4)
at new init (jquery-1.9.1.min.js:3)
at b (jquery-1.9.1.min.js:3)
at HTMLAnchorElement.<anonymous> (main.js:201)
at Function.each (jquery-1.9.1.min.js:3)
at init.each (jquery-1.9.1.min.js:3)

在at HTMLAnchorElement.<anonymous> (main.js:201)问题实际开始的跟踪中有 。通常你可以预料到这个 bug 很少出现在 jQuery 中。更常见的是，您的输入只是在那里崩溃。

在你的情况下。让我们检查一下 main.js:201：

  //nav-active
  function onScroll(event){
    var scrollPosition = $(document).scrollTop();
    $('.menu-list a').each(function () {
      var currentLink = $(this);
      var refElement = $(currentLink.attr("href")); # this is line 201
      if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
        $('.menu-list a').removeClass("active");
        currentLink.addClass("active");
      }
      else{
        currentLink.removeClass("active");
      }
    });
  }

让我们看一下第 201 行：

var refElement = $(currentLink.attr("href"));

在这里，我们可以明显检查我们所拥有的内容currentLink.attr("href")（从错误消息中） - ../index.php#home - 所以你正在尝试使用以下选择器创建一个元素：$('../index.php#home')相反，我猜你正在尝试这样做$('#home')- 如果是这样，只需像这样更新您的代码段：

  //nav-active
  function onScroll(event){
    var scrollPosition = $(document).scrollTop();
    $('.menu-list a').each(function () {
      var currentLink = $(this);
      var linkHref = currentLink.attr("href"); // extract the href attribute from link
      var anchor = linkHref.split("#").pop(); // split by # and take the last part
      var refElement = $("#" + anchor); // use the anchor extract to use it as id selector

      // add refElement.length check - to just continue if the element actually exist
      if (refElement.length && refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
        $('.menu-list a').removeClass("active");
        currentLink.addClass("active");
      }
      else{
        currentLink.removeClass("active");
      }
    });
  }