联系表单7与jQuery有关的问题-隐藏/显示字段

时间:2016-06-03 作者:charlieg007

我跟踪了a tutorial 关于如何使用jQuery隐藏/显示联系人表单7字段。

我以前用过这个,效果很好。然而,在一个新网站上,由于某种原因,它不起作用。正在讨论的页面is here.

单击条件为显示的字段时,字段可以隐藏,但不显示!谁能帮我解决这个问题?代码如下:

HTML Code:

<p>You are an employee or official representative of a charity or community group (i.e. you are not a third party raising funds on their behalf (required):<br />
    [select* criteria-question-1 label_first include_blank "Yes" "No"]
</p>

<p>The fundraising will benefit people in the Southampton and/or Hampshire area (required):<br />
    [select* criteria-question-2 label_first id:form include_blank "Yes" "No]
</p>

<div class="hide" id="hide1">
    <p>Name of organisation (required):<br />
        [text* org-name placeholder "Enter organisation name here"]
    </p>
</div>
jQuery

$( document ).ready( function() {

    //Hide the field initially
    $( "#hide1" ).hide();

    //Show the text field only when the third option is chosen - this doesn\'t
    $( \'#form\' ).change( function() {
        if( $( "#form" ).val() == "Yes" ) {
            $("#hide1").show();
        }
        else {
            $( "#hide1" ).hide();
        }
    } );
} );

1 个回复
SO网友:Howdy_McGee

问题很可能是noConflict. 默认情况下,每当WordPress将jquery排入队列时,它都会在noConflict 模式,这意味着它不为jQuery 其中默认值为$ 正如你在问题中所说的那样。

See this Dev Resource comment:

当您将依赖于jQuery的脚本排入队列时,请注意WordPress中的jQuery以noConflict模式运行,这意味着您不能使用公共$别名。您必须改用完整的jQuery。或者,使用$快捷方式将代码放在noConflict包装器中
-bcworkz

这意味着您需要更换$( document ).ready() 使用:

jQuery( document ).ready( function( $ ) {
此外,根据您的评论,在定义JQuery之前,您正在脚本中添加的内容(通过查看页面源代码)。如果你用的是普通的wp_enqueu_script() (您应该使用/学习使用)您需要定义jquery 进入$deps 阵列:

wp_enqueue_script(
    \'my-irrelevant-handle\',                                  // Script handle to identify your script
    get_stylesheet_directory_uri() . /my-script-path.js,     // Path to your script relative to style.css
    array( \'jquery\' ),                                       // Tells WordPress to add this script after JQuery has been added
    \'\',                                                      // Optional version number
    true                                                     // Load this into the footer for speed purposes
);
This looks like a good enqueuing tutorial.

相关推荐

JQuery php请求返回一个奇怪的结果

我有一个奇怪的小故障发生在我身上,我不知道我是如何产生它的,或者它是否是正常的。我正在开发自己的插件,当一个足球队/足球队被输入到一个框中时,它会检查它是否已经在数据库中。以下是我的代码行add_action( \'admin_footer\', \'fws_teamcheck_javascript\' ); function fws_teamcheck_javascript() { ?> <script type="text/javascript">