在WordPress中出现"Uncaught TypeError: $不是一个函数"错误

Question

有一些关于这个错误的问题，但我找不到任何解决方案。我正在开发一个WordPress主题，在enqueue脚本期间出现了这个错误：

Uncaught TypeError: $ is not a function
    at components.js?ver=4.8:65
    at components.js?ver=4.8:95

这是我添加到functions.php的enqueue代码:

function goc_scripts() {
    wp_enqueue_style( 'goc-style', get_stylesheet_uri() );

    wp_enqueue_style( 'socicon', get_stylesheet_directory_uri() . '/css/socicon.css', array() );

    wp_enqueue_style( 'bootstrap-social', get_stylesheet_directory_uri() . '/css/bootstrap-social.css', array() );

    wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');

    wp_enqueue_style('font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css');

    wp_enqueue_style('simple-line-icons', get_template_directory_uri() . '/css/simple-line-icons.min.css');

    wp_enqueue_style('animate', get_template_directory_uri() . '/css/animate.min.css');

    wp_enqueue_style('cubeportfolio', get_template_directory_uri() . '/css/cubeportfolio.min.css');

    wp_enqueue_style( 'owlcarousel-style', get_template_directory_uri() . '/css/owl.carousel.css' );

    wp_enqueue_style( 'fancybox', get_template_directory_uri() . '/css/jquery.fancybox.css' );

    wp_enqueue_style( 'goc-slider', get_template_directory_uri() . '/css/slider.css' );

    wp_enqueue_style( 'goc-plugins', get_template_directory_uri() . '/css/plugins.css' );

    wp_enqueue_style( 'goc-red3', get_template_directory_uri() . '/css/themes/red3.css' );

    wp_enqueue_style( 'goc-custom', get_template_directory_uri() . '/css/custom.css' );

    wp_enqueue_script( 'goc-jquery-min', get_template_directory_uri() . '/js/jquery.min.js', array(), false, true );

    wp_enqueue_script( 'goc-jquery-migrate', get_template_directory_uri() . '/js/jquery-migrate.min.js', array(), false, true );

    wp_enqueue_script( 'goc-jquery-easing', get_template_directory_uri() . '/js/jquery.easing.min.js', array(), false, true );

    wp_enqueue_script( 'goc-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

    wp_enqueue_script( 'goc-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

    wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array(jquery), true); // prueba

    wp_enqueue_script( 'goc-reveal-animate', get_template_directory_uri() . '/js/reveal-animate.js', array(), '4.8', true );

    wp_enqueue_script( 'goc-reveal-animate-wow', get_template_directory_uri() . '/js/reveal-animate/wow.js', array(), false, true );

    wp_enqueue_script( 'goc-cubeportfolio', get_template_directory_uri() . '/js/cubeportfolio/js/jquery.cubeportfolio.min.js', array(), false, true );

    wp_enqueue_script( 'goc-owl-carousel', get_template_directory_uri() . '/js/owl-carousel/owl.carousel.min.js', array(), false, true );

    wp_enqueue_script( 'goc-counterup', get_template_directory_uri() . '/js/counterup/jquery.counterup.min.js', array(), false, true );

    wp_enqueue_script( 'goc-waypoints', get_template_directory_uri() . '/js/counterup/jquery.waypoints.min.js', array(), false, true );

    wp_enqueue_script( 'goc-fancybox', get_template_directory_uri() . '/js/fancybox/jquery.fancybox.pack.js', array(), false, true );

    wp_enqueue_script( 'goc-jquery.smooth-scroll', get_template_directory_uri() . '/js/smooth-scroll/jquery.smooth-scroll.js', array(), false, true );

    wp_enqueue_script( 'goc-slider', get_template_directory_uri() . '/js/slider-for-bootstrap/js/bootstrap-slider.js', array(jquery), false, true );

    wp_enqueue_script( 'goc-component', get_template_directory_uri() . '/js/components.js', array(jquery), '4.8', false );

    wp_enqueue_script( 'goc-components', get_template_directory_uri() . '/js/components-shop.js', array(), '4.8', true );

    wp_enqueue_script( 'goc-appjs', get_template_directory_uri() . '/js/app.js', array(), false, true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'goc_scripts' );

以下是出现错误的代码components.js（第65行和第95行）：

var LayoutHeader = function () {
    var offset = parseInt($('.c-layout-header').attr('data-minimize-offset') > 0 ? parseInt($('.c-layout-header').attr('data-minimize-offset')) : 0);
    var _handleHeaderOnScroll = function () {
        if ($(window).scrollTop() > offset) {
            $("body").addClass("c-page-on-scroll");
        } else {
            $("body").removeClass("c-page-on-scroll");
        }
    }

    var _handleTopbarCollapse = function () {
        $('.c-layout-header .c-topbar-toggler').on('click', function (e) {
            $('.c-layout-header-topbar-collapse').toggleClass("c-topbar-expanded");
        });
    }

    return {
        //main function to initiate the module
        init: function () {
            if ($('body').hasClass('c-layout-header-fixed-non-minimized')) {
                return;
            }

            _handleHeaderOnScroll();
            _handleTopbarCollapse();

            $(window).scroll(function () {
                _handleHeaderOnScroll();
            });
        }
    };
}();

- Capitan Duke

---

请使用JQuery代替$。 - Ataur Rahman Munna

Answer 1

有两种解决方案：

#1

在代码中将所有的 $ 替换为 jQuery。

#2

或者一个简单的方法。

只需要在你的 .js 文件顶部按如下方式将 jQuery 赋值为一个全局变量 $，然后你的所有代码都将正常工作。

var $ = jQuery;

我希望这对你有用。

- Jithin Raj P R

---

你好 @Jithin Raj P R - 我在我的 components.js 文件中将 $ 替换为 JQuery（两种方式都试过），但是什么也没有发生，同样的错误一直存在，这让我很疯狂。错误信息如下：Uncaught TypeError: $ is not a function at components.js?ver=4.8:65 at components.js?ver=4.8:95 - Capitan Duke

@CapitanDuke，你能分享一下你文件的实时链接给我吗？这样我就可以检查一下了。 - Jithin Raj P R

你应该清除浏览器缓存，然后再次检查。@CapitanDuke - Ataur Rahman Munna

@Jithin Raj P R 谢谢！！！是的，可能是我一直看到的缓存问题导致了这个错误！ :) - Capitan Duke