从网站的主导航链接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不喜欢它,但是对引起它的原因以及如何解决它的任何想法都将不胜感激。
答案 0 :(得分:0)
当我快速单击导航时,在控制台中看到以下错误:
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')
答案 1 :(得分:0)
它看起来好像您的jquery库未加载,您正在尝试使用 库,然后再加载。
尝试包括在下面的head元素中。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>