如何在Wordpress中将JavaScript代码添加到js文件

Question

How add javascript code to a .js file and add to function.php in wordpress? I have that js code and I add that code to a .js file and use that in function.php by wp_enqueue_script() function but It doesn't load.

 $(document).ready(function () {
        //  When user clicks on tab, this code will be executed
        $(".mtabs li").click(function () {
            //  First remove class "active" from currently active tab
            $(".mtabs li").removeClass('active');

            //  Now add class "active" to the selected/clicked tab
            $(this).addClass("active");

            //  Hide all tab content
            $(".mtab_content").hide();

            //  Here we get the href value of the selected tab
            var selected_tab = $(this).find("a").attr("href");

            //  Show the selected tab content
            $(selected_tab).fadeIn();

            //  At the end, we add return false so that the click on the link is not executed
            return false;
        });
        $("#simulate").click(function () {
            $('a[rel="tab2"]').trigger("click");
        });
    });

Answer 1

Just an improvement/different approach to @mash-r's answer

After using jQuery dependency with wp_enqueue_script like this wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

Instead of repeating jQuery all over your code you can wrap it in an IIFE (Immediately Invoked Function Expression - (function(){})(); )

(function ($) {
    $(document).ready(function () {
        $(".mtabs li").click(function () {
            //  First remove class "active" from currently active tab
            $(".mtabs li").removeClass('active');

            //  Now add class "active" to the selected/clicked tab
            $(this).addClass("active");

            //  Hide all tab content
            $(".mtab_content").hide();

            //  Here we get the href value of the selected tab
            var selected_tab = $(this).find("a").attr("href");

            //  Show the selected tab content
            $(selected_tab).fadeIn();

            //  At the end, we add return false so that the click on the link is not executed
            return false;
        });
        $("#simulate").click(function () {
            $('a[rel="tab2"]').trigger("click");
        });
    });
})(jQuery);

This will pass jQuery as parameter, which will be used within the function as $ . This way you can use the syntax you are already used to.

Answer 2

Make sure you use jQuery dependency when wp_enqueue_script.

wp_enqueue_script('script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ) , false, false);

Also, change all $ to jQuery in your javascript code.

jQuery(document).ready(function () {
        //  When user clicks on tab, this code will be executed
        jQuery(".mtabs li").click(function () {
            //  First remove class "active" from currently active tab
            jQuery(".mtabs li").removeClass('active');

            //  Now add class "active" to the selected/clicked tab
            jQuery(this).addClass("active");

            //  Hide all tab content
            jQuery(".mtab_content").hide();

            //  Here we get the href value of the selected tab
            var selected_tab = jQuery(this).find("a").attr("href");

            //  Show the selected tab content
            jQuery(selected_tab).fadeIn();

            //  At the end, we add return false so that the click on the link is not executed
            return false;
        });
        jQuery("#simulate").click(function () {
            jQuery('a[rel="tab2"]').trigger("click");
        });
    });