WooCommerce 中的类以使用 Jquery 显示/隐藏答案

【问题标题】：Class in WooCommerce to show/hide with JqueryWooCommerce 中的类以使用 Jquery 显示/隐藏
【发布时间】：2016-08-01 20:47:12
【问题描述】：

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

我在 functions.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>';
}

现在我尝试将其隐藏在 css witht 中：

.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();
});

我做错了什么？

我不明白为什么不起作用。

【问题讨论】：

标签： php jquery css wordpress woocommerce

【解决方案1】：

您的选择器不正确。

$( ".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，除非可能有多个。

【讨论】：

没用，还尝试使用这样的 id： $( "#to_textbox_field" ).slideToggle(); $( "#from_textbox_field" ).slideToggle(); $( "#message_text_field" ).slideToggle();
您的控制台是否出现任何错误？可能还有其他事情发生。
不，完全没有错误。很奇怪，它不起作用 =(
我猜你还有其他事情发生，可能是某种 JS 错误。插入一些 console.log 语句，看看是否有任何内容打印到您的浏览器控制台。
@PedAltuve：您是否检查过点击功能是否在第一位？你能显示字段的 html 输出及其父容器吗？

【解决方案2】：

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;，你最好也使用 .addClass()，.hasClass()，.removeClass()，.toggleClass() 和 .css() 函数在你的 JS 脚本中。

【讨论】：