Question

我在现有的单页网站上添加了博客部分，但是在使用jQuery时遇到了一些麻烦。新博客将托管在新的/博客目录中，因此新菜单项与其他单页index.html中的所有其他href="#"标签不同：

                            <!-- Menu -->
        <ul class="menu">
            <li><a href="#about">About</a></li>
            <li><a href="#skills">Skills</a></li>
            <li><a href="#portfolio">Works</a></li>
            <li><a href="/blog">Blog</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>

我已经尝试了各种不同的选择器来使一切正常工作，但似乎没有任何效果。我为博客href提供了一个唯一的ID，并尝试使用#wp-blog选择它，我尝试使用.menu li a[href^='/']选择它，甚至使用.menu li a[href='{url}']选择完整的网址，但是我在＆＃39;}没有看到任何结果。此外，我尝试交换双引号和单引号，这也不起作用。我相信代码在外部以单引号开头，而且在href标签中使用了双打，但它无论如何都无法正常工作。这里是JS的背景：

$(document).on("scroll", onScroll);

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

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

尽管进行了几个小时的研究并且在此处投入了将近一整天的时间，我的控制台每次滚动时都会抛出此错误：

jquery-3.2.1.min.js:formatted:572 Uncaught Error: Syntax error, unrecognized expression: /blog
    at Function.ga.error (jquery-3.2.1.min.js:formatted:572)
    at ga.tokenize (jquery-3.2.1.min.js:formatted:896)
    at ga.select (jquery-3.2.1.min.js:formatted:1073)
    at Function.ga (jquery-3.2.1.min.js:formatted:311)
    at Function.a.find (jquery-migrate-1.4.1.min.js:5)
    at r.fn.init.find (jquery-3.2.1.min.js:formatted:1194)
    at r.fn.init.a.fn.find (jquery-migrate-1.4.1.min.js:5)
    at a.fn.init.r.fn.init (jquery-3.2.1.min.js:formatted:1215)
    at new a.fn.init (jquery-migrate-1.4.1.min.js:5)
    at r (jquery-3.2.1.min.js:formatted:33)

我已经查看了有关jQuery选择器的其他问题：Select <a> which href ends with some string

关于href选择器的

和jquery语法错误问题：Syntax error, unrecognized expression for href

也在这里：https://github.com/jquery/jquery/issues/2824

以及此处多个选择器的问题：Multiple selector chaining in jQuery?

非常感谢任何建议！感谢。

Answer 1

请尝试使用'.menu li a, .scroll-btn a[href^="#"]'。

我认为jQuery正试图将 / blog 视为正则表达式。所以发生了这个错误。

Answer 2

这可能是选择器尝试的逃避问题：

$(".menu li a[href^='#'], .scroll-btn a[href^='#'], .menu li a[href='\\/blog']").on("click", function(e) {

显示这个小提琴的工作： https://jsfiddle.net/aLenr3fp/2/

语法错误，无法识别的表达式：/ blog

2 个答案: