WordPress 联系表 7 中的自定义 JavaScript 不起作用

Question

我试图在通过验证并提交后隐藏联系表单。我想用一个简单的自定义 JavaScript 函数来做到这一点。

问题是，控制台不断通知我我的 JS 函数未定义。起初我认为这可能会发生，因为我没有正确地将 *.js 加入队列，但事实并非如此——我的 custom.js 在页面的源代码中清晰可见，并且它的内容与我输入的内容相匹配里面。

这是我目前的代码。

functions.php（子主题）

add_action( 'wp_enqueue_scripts', 'for_contact' );
function for_contact() {
    wp_enqueue_script(
        'contactFormHide',
        get_stylesheet_directory_uri() . '/custom.js',
        array('jquery')
    );
}

custom.js

var $j = jQuery.noConflict();

$j(document).ready(function() {
    "use strict";

    function contactFormHide (){
        $('.section_inner_margin').css('display','none');
        $('.section_inner').html('<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">Your message has been sent.</div>');
    }

});

Contact Form 7 设置（附加设置选项卡）

on_sent_ok: "contactFormHide()"

我做错了什么，我该如何纠正？

Answer 1

Ahmed Ginani 的解决方案可能会奏效，但您是否也尝试过在完全独立的函数中将 $ 作为参数传递，如下所示：

(function($) {
    $(document).ready(function() {
        "use strict";

        function contactFormHide (){
            $('.section_inner_margin').css('display','none');
            $('.section_inner').html('<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">Your message has been sent.</div>');
        }
    });
})(jQuery);

这样，您将jQuery 对象作为参数传递给function。这意味着我们可以在函数内本地使用$，而不会与其他脚本/框架/库等冲突......

Answer 2

代码中的更正。在函数中定义$。

var $ = jQuery.noConflict();

function contactFormHide(){
            $('.section_inner_margin').css('display','none');
            $('.section_inner').html('<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">Your message has been sent.</div>');
        }