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

Question

如何将JavaScript代码添加到.js文件并在wordpress中添加到function.php？ 我有该js代码，并将该代码添加到.js文件中，并通过wp_enqueue_script（）函数在function.php中使用了该代码，但未加载。

 $(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

只是对@ mash-r答案的改进/不同方法

在将jQuery依赖项与wp_enqueue_script一起使用后，像这样wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

您可以将其包装在IIFE （立即调用的函数表达式- (function(){})(); ）中，而不是在整个代码中重复使用jQuery (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);

这将传递jQuery作为参数，该函数将在$ 。 这样，您可以使用已经习惯的语法。

Answer 2

确保在wp_enqueue_script时使用jQuery依赖关系。

wp_enqueue_script（'script'，get_template_directory_uri（）。'/js/script.js'， array ( 'jquery' ) ，false，false）;

另外，在您的JavaScript代码中将所有$更改为jQuery 。

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");
        });
    });