Question

从网站的主导航链接from this page到我的homepage时，出现此错误：

`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不喜欢它，但是对引起它的原因以及如何解决它的任何想法都将不胜感激。

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/Reference/Errors/Not_defined

您可以从下至上读取此特定的堆栈跟踪-因此您将看到事件是在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的机会。只需将var放在$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)。通常，您可以预料到该错误很少，很少出现在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-因此，您正在尝试使用以下选择器创建元素：{{1} }而是我想您正在尝试做$('../index.php#home')-如果是这样，只需像这样更新您的代码段即可：

$('#home')

Answer 2

它看起来好像您的jquery库未加载，您正在尝试使用库，然后再加载。

尝试包括在下面的head元素中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

带有指向锚点的链接的href引发jQuery错误

2 个答案: