簡體   English   中英

使用 JavaScript (jQuery) 創建自定義計算

[英]Creating custom calculations using JavaScript (jQuery)

我希望獲取包含在<bdi>標記中的 HTML 字符串的值 - 對其執行計算 - 並將 output 結果生成一個單獨的<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 - 然后 output 目標中的結果圖形嵌套如下:

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

似乎下一步是創建變量,以便可以獲取數據並執行計算,但我不知道如何連接這些點......

鑒於您只想更改客戶端顯示的內容...

試試這個......如果它按預期工作,我將編輯解釋。

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM