根据变化价格隐藏 div

Question

我正在尝试根据所选项目的变化价格显示或隐藏 div。

例如，we have a product 其基本（最低）期权价格为 359 英镑。

同样的产品也有 455 英镑的选择。

我们还有一个财务插件，其最低支出上限为 400 英镑，财务计算器（用户前端）位于我们添加到购物车按钮下方名为“.finance”的扰流板中。

我希望能够动态隐藏这个扰流板（即它包含 div '.finance'），以响应所选的变化价格，以便当支出低于上述值时，客户看不到财务选项财务上限。

我尝试了以下方法无济于事 - 如您所见，我对 js 不太方便：

jQuery( function( $ ) {
  $( ".in_stock" ).on( "woocommerce_variation_select_change", function() {
    setTimeout( function() {
      if ( $( 'span.amount' >= '400' ).length ) {
        $( 'div.finance' ).show( 'fast' );
      } else {
        $( 'div.finance' ).hide( 'fast' );
      }
    }, 50 );
  });
});

我怎样才能做到这一点？

Answer 1

在更改金额时使用下面的sn-p；

jQuery( function( $ ) {
  // Run on selected variation price change.
  let currency_symbol = '£';

  for ( let i = 0; i < $( 'p.price' ).length; i++ ) {
    // Define the subtotal block.
    let sub_total = $( 'p.price:contains(Subtotal ' + currency_symbol + ')' );
 
    // Define the condition for the finance block.
    let amount = Number( sub_total.text().split( ' ' + currency_symbol )[1] ) >= 400;

    // Show or hide the finance block based on the condition above.
    amount ? $( 'div.finance' ).show( 'fast' ) : $( 'div.finance' ).hide( 'fast' );
  }
});

Answer 2

1. 我可能会失去 setTimeout，因为 50 毫秒不会有太大的不同。

2. 假设span.amount 是您想要获取其文本内容的一个元素，将其强制为一个数字，然后检查它是否在范围内。

$('.in_stock').on('woocommerce_variation_select_change', function() {
  const value = Number($('span.amount').text());
  if (value >= 400) {
    $('div.finance').show('fast');
  } else {
    $('div.finance').hide('fast');
  }
});