Javascript PHP函数输出仅在单击页面后更新

因此，我正在寻找一种方法来更新可变产品（Woocommerce+WP）的定价，而不显示价格范围+最终价格（包括变量）

我偶然发现了这个脚本，它似乎非常适合我的用例

它在手机上运行良好。 但是，在桌面浏览器中，我需要单击页面的任意位置来更新定价。这很不方便。 你知道怎么解决这个问题吗

我的编码技能仅限于HTML/CSS和非常基本的js。 感谢您的帮助

代码如下：

   add_action( 'woocommerce_before_single_product', 'check_if_variable_first' );
function check_if_variable_first(){
   if ( is_product() ) {
       global $post;
       $product = wc_get_product( $post->ID );
       if ( $product->is_type( 'variable' ) ) {
           // removing the price of variable products
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

// Change location of
add_action( 'woocommerce_single_product_summary', 'custom_wc_template_single_price', 10 );
function custom_wc_template_single_price(){
   global $product;

// Variable product only
if($product->is_type('variable')):

   // Main Price
   $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
   $price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

   // Sale Price
   $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
   sort( $prices );
   $saleprice = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

   if ( $price !== $saleprice && $product->is_on_sale() ) {
       $price = '<del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price . $product->get_price_suffix() . '</ins>';
   }

   ?>
   <style>
       div.woocommerce-variation-price,
       div.woocommerce-variation-availability,
       div.hidden-variable-price {
           height: 0px !important;
           overflow:hidden;
           position:relative;
           line-height: 0px !important;
           font-size: 0% !important;
       }
   </style>
   <script>
   jQuery(document).ready(function($) {
       $('select').blur( function(){
           if( '' != $('input.variation_id').val() ){
               $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
               console.log($('input.variation_id').val());
           } else {
               $('p.price').html($('div.hidden-variable-price').html());
               if($('p.availability'))
                   $('p.availability').remove();
               console.log('NULL');
           }
       });
   });
   </script>
   <?php

   echo '<p class="price">'.$price.'</p>
   <div class="hidden-variable-price" >'.$price.'</div>';

endif;
}

       }
   }
}

add_action（'woocommerce_在单个产品之前，'check_if_variable_first'）；
函数检查\u如果变量\u first（）{
if（is_product（））{
全球$员额；
$product=wc\U get\U product（$post->ID）；
如果（$product->is_类型（'variable'））{
//消除可变产品的价格
删除行动（'woocommerce\u single\u product\u summary'、'woocommerce\u template\u single\u price'，10）；
//更改
添加行动（'woocommerce\u single\u product\u summary'、'custom\u wc\u template\u single\u price'，10）；
函数自定义\u wc\u模板\u单个\u价格（）{
全球$产品；
//仅可变产品
如果（$product->is_类型（'variable'）：
//主要价格
$prices=array（$product->get_variation_price（'min'，true），$product->get_variation_price（'max'，true））；
$price=$prices[0]！=$prices[1]？sprintf（'From:%1$s'，'woocommerce'），wc_prices（$prices[0]）：wc_prices（$prices[0]）；
//销售价格
$prices=array（$product->get_variation_regular_prices（'min'，true），$product->get_variation_regular_prices（'max'，true））；
排序（价格）；
$saleprice=$prices[0]！=$prices[1]？sprintf（'From:%1$s'，'woocommerce'），wc_prices（$prices[0]）：wc_prices（$prices[0]）；
如果（$price！=$saleprice&&$product->正在销售（））{
$price='.$saleprice.$product->get_price_suffix（）。$price.$product->get_price_suffix（）。'；
}
?>
商业-变化-价格部门，
商业-变化-可用性分部，
部门隐藏-可变价格{
高度：0px！重要；
溢出：隐藏；
位置：相对位置；
线高：0px！重要；
字体大小：0%！重要；
}
jQuery（文档）.ready（函数（$）{
$（'select'）.blur（函数（）{
if（“”！=$（'input.variation_id'）.val（））{
$（'p.price'）.html（$（'div.woocommerce-variation-price>span.price'）.html（））.append（'
'+$（'div.woocommerce-variation-availability'）.html（）+'
'）；
log（$（'input.variation_id'）.val（））；
}否则{
$（'p.price'）.html（$（'div.hidden-variable-price'）.html（））；
如果（$（'p.availability'））
$（'p.availability'）.remove（）；
log（'NULL'）；
}
});
});
您面临的问题似乎是
$（'select'）.blur（）
。
由于您希望此项自动更改，我建议将此项更改为change（）


jQuery（文档）.ready（函数（$）{
$（'select'）.change（函数（）{
if（“”！=$（'input.variation_id'）.val（））{
$（'p.price'）.html（$（'div.woocommerce-variation-price>span.price'）.html（））.append（'
'+$（'div.woocommerce-variation-availability'）.html（）+'
'）；
log（$（'input.variation_id'）.val（））；
}否则{
$（'p.price'）.html（$（'div.hidden-variable-price'）.html（））；
如果（$（'p.availability'））
$（'p.availability'）.remove（）；
log（'NULL'）；
}
});
});

对象失去焦点时会发生
blur（）
事件。在您的情况下，当您在屏幕外单击时

对象更改时会发生
change（）
事件。在您的情况下，只要选择选项更改，上面的代码就有缺陷。
我在这篇文章中为我的用例找到了一个更好的解决方案：
谢谢。学到了很多。这解决了这个问题，同时显示了代码中的其他错误。只要变量不影响最终价格，输出就会添加“undefined”。一般来说，问题的最终解决方案可以在这里找到：
   <script>
   jQuery(document).ready(function($) {
       $('select').change( function(){
           if( '' != $('input.variation_id').val() ){
               $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
               console.log($('input.variation_id').val());
           } else {
               $('p.price').html($('div.hidden-variable-price').html());
               if($('p.availability'))
                   $('p.availability').remove();
               console.log('NULL');
           }
       });
   });
   </script>