Question

我有一个脚本，可以在用户向下滚动页面时更新固定菜单。在前端工作没有错误，但是现在我已经开始处理WordPress集成了，我收到了一条奇怪的错误消息，我无法理解。

一个加载页面就可以了，但是只要我向下滚动就会出现错误。

这是jsfiddle。 http://jsfiddle.net/2k4Eq/ 它似乎与完整的URL有关，因为它只适用于#whatWeDo。

Syntax error, unrecognized expression: http://localhost:8888/sitename/#whatWeDo

来自jQuery

 Sizzle.error = function( msg ) {
    throw new Error( "Syntax error, unrecognized expression: " + msg );
 };

谢谢！

// Update menu position on scroll
    $(function() {
        function updateMenu() {

            var lastId,
                mainMenu = $("#main-menu ul"),
                mainMenuInnerHeight = mainMenu.outerHeight(),
                mainMenuItems = $("#main-menu.navigation ul").find(".section-item a"),
                sliderButtons = $("#call-to-actions "),
                sliderLinks = sliderButtons.find("a.button.white"),         

                // Anchors relating to links                    
                scrollItems = mainMenuItems.map(function(){
                  var item = $(this).attr("href");
                  if (item.length) { return item; }
                });
                console.log(scrollItems);


            mainMenuItems.bind("click",scrollDown);
            sliderLinks.bind("click",scrollDown);

            function scrollDown(e){
                e.preventDefault(); 

                var href = $(this).attr("href"),
                    offsetTop = href === "#" ? 0 : $(href).offset().top;

                $("html, body").stop().animate({ 
                    scrollTop: offsetTop
                }, 600);

                $("#main-mobile-menu").hide();

            }   

            $(window).scroll(function(){
                var fromTop = $(this).scrollTop()+mainMenuInnerHeight;

                var cur = scrollItems.map(function(){
                    if ($(this).offset().top < fromTop)
                        return this;
                }); 


                cur = cur[cur.length-1];

                var id = cur && cur.length ? cur[0].id : "";

                if (lastId !== id) {
                    lastId = id;            

                    mainMenuItems
                        .parent().removeClass("active")
                        .end().filter("[href=#"+id+"]").parent().addClass("active");
                }                   
            }); 

        }

        updateMenu();   
        $(window).resize(function(){
            updateMenu();
        });
    });

Answer 1

问题是由于尝试使用除了哈希和ID之外的完整URL而引起的。通过拆分结果并仅使用锚点确保脚本仍然运行，但也意味着从另一个仍然有效的页面导航到更正主页部分。感谢那些帮助我，因为它让我思考并最终引领我走上正确的道路。

$(function() {
function updateMenu() {

    var lastId,
        mainMenu = $("#main-menu ul"),
        mainMenuInnerHeight = mainMenu.outerHeight(),
        mainMenuItems = $(".home .navigation ul").find("li.section-item a"),        

        scrollItems = $(".navigation li.section-item a").map(function() {
            itemsSplit = $(this).attr("href").split("#");
            itemHref = $("#" + itemsSplit[1]);

            return itemHref;
        });     

    mainMenuItems.bind("click",scrollDown);

    function scrollDown(e){
        e.preventDefault(); 

        var href = $(this).attr("href").split("#"),
            hrefSplit = href[1],

            offsetTop = $("#" + hrefSplit).offset().top;        

        $("html, body").stop().animate({ 
            scrollTop: offsetTop
        }, 600);
    }   

    $(window).scroll(function(){

        var fromTop = $(this).scrollTop()+mainMenuInnerHeight;

        var cur = scrollItems.map(function(){               
            if ($(this).offset().top < fromTop) 
                return this;
        });

        cur = cur[cur.length-1];

        var id = cur && cur.length ? cur[0].id : "";

        if (lastId !== id) {
            lastId = id;

            mainMenuItems
                .parent().removeClass("active")
                .end().filter("[href$="+id+"]").parent().addClass("active");
        }                   
    });
}

updateMenu();   
$(window).resize(function(){
    updateMenu();
});
});

Answer 2

从我所看到的问题出现在.filter()，其中id是值http://localhost:8888/sitename/#whatWeDo。错误的原因是属性值

中的特殊字符

mainMenuItems.parent().removeClass("active").end().filter("[href=#" + id + "]").parent().addClass("active");

” 所以将属性值包装成字符串文字来逃避它。

mainMenuItems.parent().removeClass("active").end().filter('[href="#' + id + '"]').parent().addClass("active");

由于@Curt删除了答案，我只是在处理OP以便看到（如果Curt取消删除它会删除它）

上述问题也可以在以下一行中找到

$(href).offset().top

href是一个字符串值。将其更改为：

$(this).offset().top

Answer 3

<强> jQuery.map()

说明：将数组或对象中的所有项目翻译为新的项目数组。

var cur = scrollItems.map(function(){
    if ($(this).offset().top < fromTop)
        return this;
});

将其更改为：

var cur = $.map(scrollItems, function () {
    if ($(this).offset() != null) {
        if ($(this).offset().top < fromTop) return this;
    }
});

jQuery语法错误，无法识别的表达式

3 个答案: