1

我希望获取标签中包含的 HTML 字符串的值<bdi>- 对其执行计算 - 并将结果输出为单独的<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>

似乎下一步是创建变量，以便可以获取数据并执行计算，但我不知道如何连接这些点......

4

1 回答 1

0

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

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

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)
  
})

编辑超过一千的 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")
于 2021-01-22T22:26:31.970 回答