在Woocommerce中显示或隐藏所选送货方式更改的html元素

我正在尝试根据所选的送货方式显示/隐藏我的结帐页面中的一些元素。 我试图显示/隐藏的页面元素来自另一个插件，因此我尝试更改它们的显示属性。 我看过很multithreading：

根据Woocommerce 3中的送货方式显示或隐藏结帐字段

但它适用于结帐字段，我不知道如何为页面元素执行此操作。

然后基于这个答案线程这是我的代码到目前为止：

add_action( 'wp_footer', 'conditionally_hidding_order_delivery_date' ); function conditionally_hidding_order_delivery_date(){ // Only on checkout page if( ! is_checkout() ) return; // HERE your shipping methods rate ID "Home delivery" $home_delivery = 'distance_rate_shipping'; ?>  jQuery(function($){ // Choosen shipping method selectors slug var shipMethod = 'input[name^="shipping_method"]', shipMethodChecked = shipMethod+':checked'; // Function that shows or hide imput select fields function showHide( actionToDo='show', selector='' ){ if( actionToDo == 'show' ) $(selector).show( 200, function(){ $(this).addClass("validate-required"); }); else $(selector).hide( 200, function(){ $(this).removeClass("validate-required"); }); $(selector).removeClass("woocommerce-validated"); $(selector).removeClass("woocommerce-invalid woocommerce-invalid-required-field"); } // Initialising: Hide if choosen shipping method is "Home delivery" if( $(shipMethodChecked).val() != '' ) { showHide('hide','#e_deliverydate_field' ); showHide('hide','#time_slot_field' ); } // Live event (When shipping method is changed) $( 'form.checkout' ).on( 'change', shipMethod, function() { if( $(shipMethodChecked).val() == '' ) { showHide('show','#e_deliverydate_field' ); showHide('show','#time_slot_field' ); } else { showHide('hide','#e_deliverydate_field' ); showHide('hide','#time_slot_field' ); } }); });  <?php } 

但它没有完全正常工作（初始化function不起作用。）

很感谢任何forms的帮助。

附加编辑：

 
Date* 

我的目标是将p元素的显示属性从块更改为无，反之亦然。

Answer 1

所需的代码比我在其他答案中使用的代码简单得多，但您需要确保目标选择的运输方法是'distance_rate_shipping'因为我无法测试它。

对于初始化问题，请参阅我的答案末尾公开的解决方案。

简化所需的代码：

 // Embedded jQuery script add_action( 'wp_footer', 'checkout_delivery_date_script' ); function checkout_delivery_date_script() { // Only checkout page if( ! ( is_checkout() && ! is_wc_endpoint_url() ) ) return; ?>   

代码位于活动子主题（或主题）的function.php文件中。 它应该工作。

---

初始化问题 ：

这肯定是因为您使用的生成交付日期输出的插件在初始化后会延迟

解决方案可能是在初始化执行上添加一些延迟 。

所以应该尝试替换这个：

 // 1. On start showHideDeliveryDate(); 

通过我的代码中的以下内容（将执行延迟调整为高于或低于 500 ） ：

 // 1. On start setTimeout(function(){ showHideDeliveryDate(); }, 500);