首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >WordPress - 'jquery is not defined‘问题

WordPress - 'jquery is not defined‘问题
EN

Stack Overflow用户
提问于 2019-10-27 08:35:56
回答 1查看 419关注 0票数 1

在我发布这个问题之前,我想说的是,我已经在Stackoverflow上搜索了很多与这个问题相关的问题/答案,但没有一个真正解决了我的问题。

所以,我冒着风险发布了另一篇文章。

我正在使用一个基于引导的主题在WordPress中工作。它包含一个Bootstrap模式窗口。我试图在页面加载时触发模式窗口(而不是用户点击按钮)。我还想设置一个cookie,以便模式窗口只出现一次。

jQuery是自动加载的可湿性粉剂主题和我已经检查(使用查看页面源代码),并确认jQuery是加载在页面的头部。

在functions.php中,我已经将加载“jQuery Cookie”的脚本排入队列,并在页面加载时触发模式窗口:

代码语言:javascript
复制
function modal_scripts() {
    wp_enqueue_script( 'jq-cookie-js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery- 
        cookie/1.4.1/jquery.cookie.min.js', array(), false, true );
    wp_enqueue_script( 'modal-custom-js', get_stylesheet_directory_uri() . '/js/custom-modal.js', 
        array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'modal_scripts' );

custom-modal.js包含触发模式并设置cookie的脚本:

代码语言:javascript
复制
jQuery(function($) {

    $(window).load(function() {

        if(jquery.cookie('alreadyShown') === null) {

            setTimeout(function() {
                $('.the-modal').modal('show');
            }, 10000);

            jquery.cookie('alreadyShown', true, {expires: 7});

        }
    });
});

我仔细检查了一下,所有的文件似乎都加载了OK - jQuery在头部,在页脚加载了'jQuery Cookie‘和’jQuery-modal.js‘。

然而,我仍然得到这个错误:

代码语言:javascript
复制
custom-modal.js?ver=5.2.4:3 Uncaught ReferenceError: jquery is not defined
    at custom-modal.js?ver=5.2.4:3
    at dispatch (jquery.js?ver=1.12.4-wp:3)
    at r.handle (jquery.js?ver=1.12.4-wp:3)

希望有人能指出我做错了什么。非常感谢。

EN

回答 1

Stack Overflow用户

发布于 2019-10-28 12:27:39

经过几个小时的努力,终于解决了这个问题(我的头撞了几次墙)。

首先,“jQuery Cookie”插件似乎已经过时了,不再需要维护。它已经被GitHub - js-cookie的JS-Cookie所取代

因此,我将入队脚本(functions.php)更新为JS-Cookie:

代码语言:javascript
复制
function modal_scripts() {
    wp_enqueue_script( 'js-cookie-js', get_stylesheet_directory_uri() . 
        '/js/js.cookie.js', array(), false, true );
    wp_enqueue_script( 'modal-custom-js', get_stylesheet_directory_uri() . 
        '/js/custom-modal.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'modal_scripts' );

现在,我的custom-modal.js被编辑为:

代码语言:javascript
复制
(function($){
    $(document).ready(function() {

        var thecookie = Cookies.get('mymodal');

        if(!thecookie){

            setTimeout(function() {
                $('.the-modal').modal('show');
            }, 10000);

            Cookies.set('mymodal', 'true', { expires: 7 })

       }else{
            $('.the-modal').modal('hide');
        }
    });
})(jQuery);

你猜怎么着?!它起作用了。

我不是一个“枪”程序员,所以我的代码(上面)可能可以改进,但现在,它可以做这项工作。

快乐的日子!

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58575776

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档