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's answer的改进/不同方法

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

您可以将其包装在IIFE（立即调用函数表达式-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");
        });
    });

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

2 个答案: