【问题标题】:Issues with jQuery in WordPress. jQuery load but don't workWordPress 中的 jQuery 问题。 jQuery加载但不工作
【发布时间】:2020-04-21 16:42:58
【问题描述】:

首先,如果我的英语不完全清楚,我深表歉意。 我会尽量简明扼要。

正如我在标题中所说,jQuery 文件已加载但它不起作用,我的意思是,它出现在头部(我已经尝试将它放在页脚中)但 $ 函数无法识别。 我在这个社区和许多其他社区调查了这个问题几天,但我没有成功。

我的functions.php头文件:

<?php
//Load jQuery
function loadjQuery() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', get_template_directory_uri().'/js/jquery.min.js', array(), null);
    wp_enqueue_script('jquery');
}

//Load js
function add_js(){
    wp_register_script('jquery-migrate', get_template_directory_uri().'/js/jquery-migrate.min.js', array("jquery"), null);
    wp_enqueue_script('jquery-migrate');
    wp_register_script('jquery-waypoints', get_template_directory_uri().'/js/jquery.waypoints.min.js', array("jquery"));
    wp_enqueue_script('jquery-waypoints');  
    wp_register_script('jquery-counterup', get_template_directory_uri().'/js/jquery.counterup.min.js', array("jquery"));
    wp_enqueue_script('jquery-counterup');
    wp_register_script('bootstrap', get_template_directory_uri().'/js/bootstrap/js/bootstrap.min.js', array('jquery'));
    wp_enqueue_script('bootstrap');
    wp_register_script('popper', get_template_directory_uri()."/js/popper.min.js"
, array('jquery'));
    wp_enqueue_script('popper');
    wp_register_script('easing', get_template_directory_uri()."/js/easing.min.js", array('jquery'));
    wp_enqueue_script('easing');    
    wp_register_script('typed', get_template_directory_uri().'/js/typed/typed.min.js', array('jquery'));
    wp_enqueue_script('typed');
    wp_register_script('main', get_template_directory_uri().'/js/main.js', array('jquery'), null);
    wp_enqueue_script('main');

}
add_action("wp_enqueue_scripts", "load_stylesheets");
add_action('wp_enqueue_scripts', 'loadjQuery',999);
add_action("wp_enqueue_scripts", "add_js", 999);
add_action('phpmailer_init','send_smtp_email');
?>

我的 main.js 文件:

jQuery(function($) {

    $('#preloader').addClass('preloader');
    $(window).on("load", function() {
        $(document).ready(function(){   
            $('.preloader').removeClass('preloader');
        });
    });
    $(document).ready(function() {
        "use strict";
        var nav = $('nav');
        var navHeight = nav.outerHeight();
            $('.navbar-toggler').on('click', function() {
            if( ! $('#mainNav').hasClass('navbar-reduce')) {
            $('#mainNav').addClass('navbar-reduce');
            }
        })


    // Back to top button
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
        $('.back-to-top').fadeIn('slow');
        } else {
        $('.back-to-top').fadeOut('slow');
        }
    });
    $('.back-to-top').click(function(){
        $('html, body').animate({scrollTop : 0},1500, 'easeInOutExpo');
        return false;
    });

    /*--/ Star ScrollTop /--*/
    $('.scrolltop-mf').on("click", function () {
        $('html, body').animate({
            scrollTop: 0
        }, 1000);
    });


        /*--/ Star Scrolling nav /--*/
        $('a.js-scroll[href*="#"]:not([href="#"])').on("click", function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: (target.offset().top - navHeight + 5)
                    }, 1000, "easeInOutExpo");
                    return false;
                }
            }
        });

        // Closes responsive menu when a scroll trigger link is clicked
        $('.js-scroll').on("click", function () {
            $('.navbar-collapse').collapse('hide');
        });

        // Activate scrollspy to add active class to navbar items on scroll
        $('body').scrollspy({
            target: '#mainNav',
            offset: navHeight
        });
        /*--/ End Scrolling nav /--*/

        /*--/ Navbar Menu Reduce /--*/
        $(window).trigger('scroll');
        $(window).on('scroll', function () {
            var pixels = 50; 
            var top = 1200;
            if ($(window).scrollTop() > pixels) {
                $('.navbar-expand-md').addClass('navbar-reduce');
                $('.navbar-expand-md').removeClass('navbar-trans');
            } else {
                $('.navbar-expand-md').addClass('navbar-trans');
                $('.navbar-expand-md').removeClass('navbar-reduce');
            }
            if ($(window).scrollTop() > top) {
                $('.scrolltop-mf').fadeIn(1000, "easeInOutExpo");
            } else {
                $('.scrolltop-mf').fadeOut(1000, "easeInOutExpo");
            }
        });

        /*--/ Star Typed /--*/
        if ($('.text-slider').length == 1) {
        var typed_strings = $('.text-slider-items').text();
            var typed = new Typed('.text-slider', {
                strings: typed_strings.split(','),
                typeSpeed: 80,
                loop: true,
                backDelay: 1100,
                backSpeed: 50
            });
        }

});
});

我还尝试使用 jQuery 更改所有 '$' 元素并加载 jquery 的 cdn,但它也不起作用。

提前致谢!

【问题讨论】:

  • 开发者控制台报什么错?
  • Uncaught TypeError: $(...).addClass(...) is not a function 但是如果我用 '$' 替换第一个函数 jQuery,错误是:$ 不是函数,参考错误。因此,如果我用“$”替换所有 jquery 元素,它仍然无法工作:(
  • 你能检查一下jQuery是否真的入队了吗?
  • 如何检查?至少在开发控制台中,除了参考错误,我什么也没看到

标签: javascript php jquery wordpress


【解决方案1】:

使用 jQuery 的正确方法是在自执行匿名函数中,如下所示:

(function($) {

  $('#preloader').addClass('preloader');
  ...

})(jQuery);

【讨论】:

  • 是的,我已经尝试过了(我的代码在匿名函数中),但没有成功
  • 编辑:我已经在匿名函数中限定了每个事件函数,它工作正常!谢谢老兄!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-02-04
  • 2011-09-23
  • 1970-01-01
  • 2011-04-14
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多