如何修复停止DIVI编辑屏幕DIVI编辑器工作的jQuery错误

Question

事先道歉..。这是第一篇文章。

我继承了一个使用自定义预订小部件代码的网站。

导致问题的代码根据屏幕大小和滚动位置(如果窗口宽度大于960，滚动位置低于300)更改CSS类。

它确实实现了上述目标，但与DIVI构建器编辑屏幕发生冲突，从而阻止了它的加载……我只是不知道如何更新它。

我认为问题在于以这种方式将脚本标记包括在标头(或正文)中，并且它正在干扰Wordpress和DIVI jQuery进程。据我所知，Divi使用wordpress jquery。

当前的代码是：

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/Javascript"><!--

    $( document ).ready(function() {
        let widget_scrolled = false;
        let scroll_level = 300;

        if ($(window).width() > 960) {

            $(window).scroll(function() {
                var scroll = $(window).scrollTop();
                var new_scroll = scroll >= scroll_level;
                if(widget_scrolled !== new_scroll){
                    $("#c5QuickBook").toggleClass("uk-widget-scrolled");
                }
                widget_scrolled = new_scroll;
            });
        } else {
            $("#c5QuickBook").addClass("uk-widget-scrolled");
        }
    });

另一个初始脚本标记可以工作(如下所示)，但这也会破坏DIVI编辑器。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

(删除到开发站点的链接，因为它是私有的)

提前谢谢。克里斯

Answer 1

$在Wordpress中jQuery是不可用的。

如果您想使用$，您应该使用以下内容包装代码：

($ => {
    // Your code here
})(jQuery);