使用JavaScript(jQuery)创建自定义计算 [英] Creating custom calculations using JavaScript (jQuery)

问题描述

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

I wish to take the value of an HTML string contained within <bdi> tags - perform a calculation on it - and output the results in a separate <bdi> string, dependent on which input is selected on-page.

源< bdi> 值会根据用户交互而动态变化，但我想知道我要问的内容是否可行，以及有关如何实现的粗略指南?

The source <bdi> value changes dynamically based on user interaction, but I want to know if what I'm asking is feasible and a rough guide on how to achieve it?

该屏幕截图说明了用户元素:

Screenshot to illustrate the user elements:

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

In the DOM, the source value is nested in the below tag:

<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将该值(或字符串-如果使用不正确的术语表示抱歉)以jQuery将其除以100并乘以20-然后将结果图输出到嵌套的目标中如下:

If the deposit input option is selected, how can I target this value (or string - sorry if incorrect terminology) using jQuery to divide it by 100 and multiply by 20 - and then output the resultant figure in the target which is nested as follows:

<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.我不确定从哪里开始，所以我们将不胜感激！

The input which needs to be selected to initiate the above has an id of #wc-option-pay-deposit. I'm not sure where to start, so any help is appreciated!

进度更新:

我设计了以下代码，该代码可以正常工作:

I've devised the following code, which works as expected:

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

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

Seems like the next step would be to create variables, so that data can be acquired and calculations can be performed, but I've no idea how to join up the dots...

推荐答案

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

Given you only want to change what is displayed on the client-side...

尝试一下...如果它能按预期工作，我将在解释中进行编辑.

Try this... And if it works as expected, I will edit with explanations.

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格式超过一千):

---

EDIT for GB number formatting over a thousand:

您必须删除千位分隔符逗号...易于使用 .replace().
但是，如果20％的结果仍然超过一千，则必须重新添加它！您需要 .toLocaleString()具有特定选项！我承认，要找到它并非易事.

You have to remove the thousand separator coma... Easy using .replace().
But you have to re-add it if the 20% result still is over a thousand! You need .toLocaleString() with specific options! I admit that would not have been easy to find.

所以现在 if 条件内的语句是:

So the statement inside the if condition now is:

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)创建自定义计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！