jQuery 구문 오류, 인식 할 수없는 표현

Question

사용자가 페이지를 아래로 스크롤 할 때 고정 된 메뉴를 사용자의 위치로 업데이트하는 스크립트가 있습니다. 프론트 엔드에서 작업하는 것은 오류가 없었습니다. 그러나 이제 WordPress 통합 작업을 시작했습니다. 이해하기 어려울 정도로 기묘한 오류 메시지가 나타납니다.

페이지를로드하는 중 하나는 문제가되지 않지만 오류가 나타납니다.

여기는 jsfiddle입니다. http://jsfiddle.net/2k4Eq/ #whatWeDo에서만 작동하므로 전체 URL과 관련이있는 것으로 보입니다. jQuery를

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

에서

는

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

감사합니다! 나는이 문제를 볼 수있는에서

// 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

는 id이 값 http://localhost:8888/sitename/#whatWeDo 인 fllowing .filter()에 있습니다. 오류의 원인은 속성 값

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