Uncaught TypeError: jQuery(...).each is not a function after update wordpress theme答案

【问题标题】：Uncaught TypeError: jQuery(...).each is not a function after updating wordpress themeUncaught TypeError: jQuery(...).each is not a function after update wordpress theme
【发布时间】：2021-11-22 17:38:50
【问题描述】：

我正在使用 wordpress 主题“Divi”。更新后，我添加到页脚模板中的一些自定义 jQuery 已经坏了，我不知道如何让它再次工作。

这是我的页脚模板中的内容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
(function($){
    jQuery('[id=beer_right]').each(function(){  
        var text = (jQuery(this).text());  
        console.log(text);
        var substring = text.substring(1,3);
        var substring100 = text.substring(1,4);
            if(substring100 == "100"){
            jQuery(this).addClass('full')
        }else if (substring >= 60 && substring <= 99){
                jQuery(this).addClass('full')
        }else if(substring >= 30 && substring <= 59){
            jQuery(this).addClass('half')
        }else{
            jQuery(this).addClass('empty')
        }
    });
    jQuery("[id=bottle_right]").each(function(){  
        var text2 = (jQuery(this).text());  
        var substring2 = text2.substring(2,4);
        //console.log(substring2);
            if(substring2 == "17" || substring2 == "16" || substring2 == "15" || substring2 == "14" || substring2 == "13" || substring2 == "12" || substring2 == "11" || substring2 == "10" || substring2 == "9%"){
                jQuery(this).addClass('strong')
        }else if(substring2 == "8%" || substring2 == "7%" || substring2 == "6%"){
            jQuery(this).addClass('average')
        }else{
            jQuery(this).addClass('light')
        }
    })
     if (jQuery('.app-link').length){
            if(navigator.userAgent.toLowerCase().indexOf("android") > -1){
            var applink = jQuery('.app-link');
            applink.attr("href", "https://play.google.com/store/apps/details?id=com.AuphanSoftware.OftenDining");
            }
            if(navigator.userAgent.toLowerCase().indexOf("iphone") > -1){
            var applink = jQuery('.app-link');
            applink.attr("href", "https://itunes.apple.com/us/app/often-dining/id608504639?mt=8")
             }
     }

})(jQuery); 
</script>




<script>
(function($){
    if (jQuery(window).width() < 585) {
        jQuery('.et_pb_tabs_controls > li').click(function() {
            jQuery('html, body').animate({
                    scrollTop: jQuery(".et_pb_all_tabs").offset().top
                }, 2000);
        });
        }
})(jQuery);

</script>

我在控制台中遇到的错误是：

(index):5831 Uncaught TypeError: jQuery(...).each is not a function

(index):5877 Uncaught TypeError: jQuery(...).width is not a function

网址是：https://sdtaproom.com/beer

【问题讨论】：

你有 (function($){ ... })(jQuery) 的 IIFE 包装器。因此，您应该在这些函数中使用$，而不是jQuery，如(function($){ ... $() ... })(jQuery)。
@Ouroborus 如果我执行上述操作，那么我会在控制台中收到此错误：$(...).each 不是函数
您知道，您仍然应该根据我给出的原因进行更改。

标签： javascript jquery wordpress divi

【解决方案1】：

您是否从 wp 中删除了 jquery？如果没有，你不需要在函数之前进行这个调用>()

函数是正确的，并且在控制台中工作，错误是由于正在加载的jquery的加载生命周期。

对不起我的英语

【讨论】：

我自己没有做任何事情来从 wp.xml 中删除 jquery。您是指在我的脚本标签之前添加 jquery 库吗？如果是这样，我已尝试删除 jquery 库，但我仍然在控制台中收到相同的错误。但是我拥有的功能确实在控制台本身内工作。所以我相信 JQuery 库发生了一些事情。我只是不确定它到底是什么以及如何处理它

【解决方案2】：

想通了。我正在使用聚合 JS 的插件“自动优化”。我关闭了它，它现在可以工作了

【讨论】：