使用 JavaScript (jQuery) 创建自定义计算

Question

我希望获取包含在 <bdi> 标签中的 HTML 字符串的值 - 对其执行计算 - 并在单独的 <bdi> 字符串中输出结果，具体取决于在页面上选择了哪个输入。

源 <bdi> 值会根据用户交互动态变化，但我想知道我的要求是否可行以及如何实现它的粗略指南？

用于说明用户元素的屏幕截图：

在 DOM 中，源值嵌套在以下标记中：

<li class="grand_total">
  <span class="name">Grand Total</span> 
  <span class="price">
     <span class="woocommerce-Price-amount amount">
        <bdi>
          <span class="woocommerce-Price-currencySymbol">£</span>
          301.00
         </bdi>
     </span>
   </span>
</li>

如果选择存款输入选项，我如何使用 jQuery 将该值（或字符串 - 如果术语不正确，抱歉）作为目标，将其除以 100 再乘以 20 - 然后输出结果数字在嵌套如下的目标中：

<li class="deposit_free_total">
   <span class="name">Due Today</span>
   <span class="price">
       <span class="woocommerce-Price-amount amount">
            <bdi>
               <span class="woocommerce-Price-currencySymbol">£</span>301.00
            </bdi>
       </span>
   </span>
</li>

启动上述操作需要选择的输入ID为#wc-option-pay-deposit。我不确定从哪里开始，所以感谢您的帮助！

进度更新：

我设计了以下代码，它按预期工作：

<script>
jQuery(document).ready(function(changeToPay){
    if (jQuery('#wc-option-pay-deposit').is(':checked')) {
            (jQuery("h1").html("Test"));
    } 
})
jQuery(document).ready(function(){ 
    changeToPay();
});
</script>

看来下一步是创建变量，这样就可以获取数据并进行计算，但我不知道如何连接这些点...

Answer 1

鉴于您只想更改客户端显示的内容...

试试这个...如果它按预期工作，我将编辑解释。

jQuery(document).ready(function(changeToPay){

  setInterval(function(){
    if (jQuery('#wc-option-pay-deposit').is(':checked') && !jQuery(".deposit_free_total bdi").is(".calculated")) {
      jQuery(".deposit_free_total bdi").html(jQuery(".grand_total .woocommerce-Price-currencySymbol")[0].outerHTML + (parseFloat(jQuery(".grand_total bdi").text().replace("£","").trim())*0.2).toFixed(2)).addClass("calculated")
    } 
  },50)
  
})

EDIT 超过一千的 GB 数字格式：

您必须删除千位分隔符...易于使用 .replace()。
但是如果20%的结果还是过千就得重新加了！您需要 .toLocaleString() 和特定选项！我承认那不容易找到。

所以 if 条件中的语句现在是：

jQuery(".deposit_free_total bdi").html(jQuery(".grand_total .woocommerce-Price-currencySymbol")[0].outerHTML + (parseFloat(jQuery(".grand_total bdi").text().replace("£","").replace(",","").trim())*0.2).toLocaleString('en-GB',{minimumFractionDigits:2, maximumFractionDigits:2})).addClass("calculated")

使用 JavaScript (jQuery) 创建自定义计算

Creating custom calculations using JavaScript (jQuery)

jquery

intermediate-code

getelementsbyclassname

woocommerce

calculation