在WooCommerce中初始化以使用Jquery显示/隐藏 - Class in WooCommerce to show/hide with Jquery

Class in WooCommerce to show/hide with 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>';
}

现在我尝试用t:将其隐藏在css中

.to-text{ display:none; }
.from-text{ display:none; }
.message-text{ display:none; }

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

$( ".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();函数与display:none; css不兼容。

相反，在JS脚本中初始化时使用visibility:hidden; css或hide();函数。

2）。在wordpress中，您需要使用jQuery而不是$缩写，如下所示：
（通过@bob0the0mighty更正代码）

jQuery(document).ready(function(){
    jQuery( ".to-text" ).slideToggle();
    jQuery( ".from-text" ).slideToggle();
    jQuery( ".message-text" ).slideToggle();
});

和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：

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

4）如果你想使用css display:none;，除了在JS脚本中使用.addClass()、.hasClass()、.removeClass()、.toggleClass()和.css()函数外，你最好还使用它们。