如何解決「undefined不是函數」in wordpress

Question

我正在將html/css/javascript中的megamenu轉換爲在wordpress中工作。我已經創建了一個工作步行者，並且都設置了。問題是，我不能讓JavaScript的工作。 JavaScript應該觸發頂級li在單擊時打開一個大型菜單部分，並在再次單擊時關閉它。

我已經使用這個JavaScript文件：

var swMegaMenu = (function() { 
 

 
\t var $listItems = $('#sw-hrmenu > ul > li'), 
 
\t \t $menuItems = $listItems.children('a'), 
 
\t \t $body = $('body'), 
 
\t \t current = -1; 
 

 
\t function init() { 
 
\t \t $menuItems.on('click', open); 
 
\t \t $listItems.on('click', function(event) { event.stopPropagation(); }); 
 
\t } 
 

 
\t function open(event) { 
 

 
\t \t if(current !== -1) { 
 
\t \t \t $listItems.eq(current).removeClass('sw-hropen'); 
 
\t \t } 
 

 
\t \t var $item = $(event.currentTarget).parent('li'), 
 
\t \t \t idx = $item.index(); 
 

 
\t \t if(current === idx) { 
 
\t \t \t $item.removeClass('sw-hropen'); 
 
\t \t \t current = -1; 
 
\t \t } 
 
\t \t else { 
 
\t \t \t $item.addClass('sw-hropen'); 
 
\t \t \t current = idx; 
 
\t \t \t $body.off('click').on('click', close); 
 
\t \t } 
 

 
\t \t return false; 
 

 
\t } 
 

 
\t function close(event) { 
 
\t \t $listItems.eq(current).removeClass('sw-hropen'); 
 
\t \t current = -1; 
 
\t } 
 

 
\t return { init : init }; 
 

 
})();

，我已經插入footer.php這樣的：

<script> 
 
\t \t \t $(function() { 
 
\t \t \t \t swMegaMenu.init(); 
 
\t \t \t }); 
 
\t \t </script>

問題是，我得到這個錯誤在footer.php：

<script> 
 
\t \t \t $(function() { // Uncaught TypeError: Undefined is not a function 
 
\t \t \t \t swMegaMenu.init(); 
 
\t \t \t }); 
 

 
</script>

，但此錯誤的JavaScript文件：

var swMegaMenu = (function() { 
 

 
\t var $listItems = $('#sw-hrmenu > ul > li'), // Uncaught TypeError: Undefined is not a function 
 
\t \t $menuItems = $listItems.children('a'), 
 
\t \t $body = $('body'), 
 
\t \t current = -1;

Answer 1

你使用WordPress的默認jQuery的實例，但你不使用noConflict() wrappers。

在noConflict()模式下，全局的$ jQuery快捷方式不可用。這就是爲什麼你看到undefined錯誤。

要糾正此問題，您需要將$的所有實例替換爲jQuery，或者用包裝函數包裝整個函數集。例如：

(function($) { 
    // Inside of this function, $() will work as an alias for jQuery() 
    // and other libraries also using $ will not be accessible under this shortcut 
})(jQuery); 

瞭解更多in the Codex。

Answer 2

試試下面的代碼

<script> 
 
\t \t \t (function($) { // Uncaught TypeError: Undefined is not a function 
 
\t \t \t \t swMegaMenu.init(); 
 
\t \t \t })(jQuery); 
 

 
</script>

var swMegaMenu = (function($) { 
 

 
\t var $listItems = $('#sw-hrmenu > ul > li'), // Uncaught TypeError: Undefined is not a function 
 
\t \t $menuItems = $listItems.children('a'), 
 
\t \t $body = $('body'), 
 
\t \t current = -1;