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

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

这件事是通过尝试使用其他完整的URL不仅仅是哈希和ID引起的。通过分割结果并仅使用锚点确保脚本仍然运行，但也意味着从另一个页面导航到更正主页部分仍然有效。感谢那些帮助我的人，最终让我走上了正确的道路。

$(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

从我所看到的问题是在fllowing .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看（将删除此，如果柯特不删除的话）

上面说的问题也可以进来以下行

$(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; 
    } 
});