Php 在WooCommerce中使用Jquery显示/隐藏

我一直在尝试修改WooCommerce，以显示礼品复选框。到目前为止，它正在显示它，但当我单击复选框时，它并没有隐藏/显示它

我在f

unctions.php上使用的代码是：

/**
* Add the field to the checkout
**/
add_action( 'woocommerce_after_order_notes','wordimpress_custom_checkout_field' );

function wordimpress_custom_checkout_field( $checkout ) {

    echo '<div id="my_custom_checkout_field"><h3>' . __( 'Is this a gift?' ) . '</h3><p style="margin: 0 0 8px;">Please check below to indicate if this is a gift</p>';

    woocommerce_form_field( 'gift_checkbox', array(
        'type'  => 'checkbox',
        'class' => array( 'gift-checkbox form-row-wide' ),
        'label' => __( 'Yes' ),
    ), $checkout->get_value( 'gift_checkbox' ) );

    woocommerce_form_field( 'to_textbox', array(
        'type'  => 'text',
        'class' => array( 'to-text form-row-wide' ),
        'label' => __( 'To' ),
    ), $checkout->get_value( 'to_textbox' ) );

    woocommerce_form_field( 'from_textbox', array(
        'type'  => 'text',
        'class' => array( 'from-text form-row-wide' ),
        'label' => __( 'From' ),
    ), $checkout->get_value( 'from_textbox' ) );

    woocommerce_form_field( 'message_textbox', array(
        'type'  => 'text',
        'class' => array( 'message-text form-row-wide' ),
        'label' => __( 'Message' ),
    ), $checkout->get_value( 'message_text' ) );

    echo '</div>';
}

$( ".gift-checkbox " ).click(function() {
    $( ".to-text form-row-wide" ).slideToggle();
    $( ".from-text form-row-wide" ).slideToggle();
    $( ".message-text form-row-wide" ).slideToggle();
});

我在
script.js
中使用的jQuery代码是：

/**
* Add the field to the checkout
**/
add_action( 'woocommerce_after_order_notes','wordimpress_custom_checkout_field' );

function wordimpress_custom_checkout_field( $checkout ) {

    echo '<div id="my_custom_checkout_field"><h3>' . __( 'Is this a gift?' ) . '</h3><p style="margin: 0 0 8px;">Please check below to indicate if this is a gift</p>';

    woocommerce_form_field( 'gift_checkbox', array(
        'type'  => 'checkbox',
        'class' => array( 'gift-checkbox form-row-wide' ),
        'label' => __( 'Yes' ),
    ), $checkout->get_value( 'gift_checkbox' ) );

    woocommerce_form_field( 'to_textbox', array(
        'type'  => 'text',
        'class' => array( 'to-text form-row-wide' ),
        'label' => __( 'To' ),
    ), $checkout->get_value( 'to_textbox' ) );

    woocommerce_form_field( 'from_textbox', array(
        'type'  => 'text',
        'class' => array( 'from-text form-row-wide' ),
        'label' => __( 'From' ),
    ), $checkout->get_value( 'from_textbox' ) );

    woocommerce_form_field( 'message_textbox', array(
        'type'  => 'text',
        'class' => array( 'message-text form-row-wide' ),
        'label' => __( 'Message' ),
    ), $checkout->get_value( 'message_text' ) );

    echo '</div>';
}

$( ".gift-checkbox " ).click(function() {
    $( ".to-text form-row-wide" ).slideToggle();
    $( ".from-text form-row-wide" ).slideToggle();
    $( ".message-text form-row-wide" ).slideToggle();
});

我做错了什么

我不明白为什么不工作。
您的选择器不正确

$( ".to-text form-row-wide" ).slideToggle();
$( ".from-text form-row-wide" ).slideToggle();
$( ".message-text form-row-wide" ).slideToggle();

应该是

$( ".to-text" ).slideToggle();
$( ".from-text" ).slideToggle();
$( ".message-text" ).slideToggle();

此外，您应该将类更改为ID，除非可能存在多个类。
1）<代码>.slideToggle（）功能不起作用
显示：无css

而是使用
可见性：隐藏css或使用
隐藏（）函数

2） 。在wordpress中，您需要使用
jQuery
而不是
$
速记，如下所示：

（使用@BOB00Mighty的更正代码）

和CSS：

.to-text, .from-text, .message-text{ 
    visibility:hidden;
}

3） 。如果要使用
$
速记，则需要在JS脚本中包含以下内容：

var $ = jQuery.noConflict();
$(document).ready(function(){   

    //your code goes here

});

所以它将是

JS脚本：

var $ = jQuery.noConflict();
$(document).ready(function(){

    $( ".to-text" ).slideToggle();
    $( ".from-text" ).slideToggle();
    $( ".message-text" ).slideToggle();

});

CSS:

4） 如果要使用css
display:none
，除了JS脚本之外，最好还要使用
.addClass（）
，
.hasClass（）
，
.removeClass（）
，
.toggleClass（）
和
.css（）
函数。
不起作用，还尝试使用如下ID:$（“#到#文本框(字段”）。slideToggle（）$（“#来自_文本框_字段”）.slideToggle（）$（“#消息#文本#字段”）.slideToggle（）；您的控制台中是否有任何错误？可能还有其他事情发生。不，根本没有错误。很奇怪，它不起作用了=（我猜您还有其他问题，可能是某种JS错误。插入一些console.log语句，看看是否有任何内容被打印到浏览器控制台。@PedAltuve:您是否首先检查了单击功能是否正常工作？能否显示字段的html输出及其父容器？
.to-text, .from-text, .message-text{ 
    visibility:hidden;
}