Creating custom calculations using JavaScript (jQuery)

无人久伴 提交于 2021-02-11 12:25:09

问题


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.

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: Screenshot to illustrate the user elements

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>

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>

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!

PROGRESS UPDATE:

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...


回答1:


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

EDIT for GB number formatting over a thousand:

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.

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


来源:https://stackoverflow.com/questions/65800244/creating-custom-calculations-using-javascript-jquery

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!