如何使用Javascript在我的頁面上收集價格以添加到總數中？

我有一個產品頁面，它最近有一個產品附加工具。我正在修改代碼以稍微改變它的格式。有一個“添加到購物車”按鈕欄，顯示添加到購物車之前的總價格。

我使用 .innerHTML 來匹配頁面頂部的價格以保持一致性，但我試圖在選擇后包含產品插件的價格。

底欄的當前代碼：

  var selector1 = ".top-bar";
  var el1 = document.querySelector(selector1);
  var selector2 = ".bottom-bar";
  var el2 = document.querySelector(selector2);
  var totalPriceSelected = '';
  
  function getPrice() {
     
     el2.innerHTML = el1.innerHTML;
  };
  

  document.addEventListener('variant:priceChange', ()=>{
     getPrice();

  });

附加工具是一個 vue 應用程式，我對它有點陌生。我設法讓插件在選擇后將價格列印到控制臺：

watch: {
      selected: function(new_value) {
            
        
          setTimeout(function(){    
            var priceSelected = document.querySelectorAll(".price_selected");
            var strippedPriceSelected = priceSelected;
            for(var i=0;i<strippedPriceSelected.length;i  ){
            var totalPriceSelected = priceSelected[i].innerHTML;
            console.log(totalPriceSelected);
            }
          }, 10);
        
        this.product.selected = new_value;
        //this.$emit('selected', this.product, new_value);
        
      }

目前，一旦選擇了附加產品，vue 會在選擇后將“.price_selected”類添加到價格元素中。上面的代碼查找“.price_selected”，將其保存到變數 totalPriceSelected，然后將其列印到控制臺。

我想知道如何將所有插件價格值（一旦選擇）添加到添加到購物車欄中的總價中。我想我必須將所有價格轉換為數字而不是字串并將它們加在一起，但我不太確定該怎么做。

產品頁面供參考

更新

watch: {
      selected: function(new_value) {

          setTimeout(function(){
            var priceTotal = 0
            var priceSelected = document.querySelectorAll(".price_selected");
            var strippedPriceSelected = priceSelected;
            for(var i = 0; i < strippedPriceSelected.length; i  ){
              var totalPriceSelected = priceSelected[i].innerHTML; // ' $ 85.00'
              var priceNumber = parseFloat(totalPriceSelected.split(' ')[1]);
                priceTotal  = priceNumber;
                
            }
            var currentBottomPrice = parseFloat(el2.innerHTML);
            el2.innerHTML = currentBottomPrice  = parseFloat(priceTotal);
            console.log(priceTotal);
          }, 10);

        this.product.selected = new_value;
        //this.$emit('selected', this.product, new_value);
        
      }
      
    },

所以我現在有這個可以正確添加它們，但是當 priceTotal 的值回到 0（取消選擇附加組件）時，總數保持不變，因為它添加了值并且它是 tr

uj5u.com熱心網友回復：

是的，因此您可以將價格字串在空間上分成兩部分，然后將第二部分決議為浮點數（十進制數）。現在你可以做任何你需要的數學運算。

setTimeout(function() {    
  var priceSelected = document.querySelectorAll(".price_selected");
  var strippedPriceSelected = priceSelected;
  for(var i = 0; i < strippedPriceSelected.length; i  ){
    var totalPriceSelected = priceSelected[i].innerHTML; // ' $ 85.00'
    var priceNumber = parseFloat(totalPriceSelected.split(' ')[1]);
    console.log(priceNumber) // Prints 85 as number
  }
}, 10);

如果您有任何問題或它不起作用，請告訴我，我很樂意為您提供幫助！

uj5u.com熱心網友回復：

我們不應該僅僅尋求一個可以解決小問題但可能在以后造成主要功能中斷的作業代碼。我發現這里使用的方法存在潛在的缺陷：

a) 如果字串包含無效字符，則從字串轉換為數字（使用 Number/parseFloat）可能會造成問題。例如，如果來自插件的價格顯示為 ' $85.00'（注意 $ 符號后缺少空格），totalPriceSelected.split(' ')[1] 將回傳 undefined。將 undefined 添加到一個數字會給你 NaN。或者，如果加載項開始將價格顯示為“85.00 美元”怎么辦。上面使用的方法將再次失敗。

b) 如果 vue 組件將價格的 CSS 類更新為其他內容，比如 amount_selected，該怎么辦？此類更改將超出您的控制范圍，但會直接影響您為顯示總價而實施的代碼/邏輯。不用說，在處理向用戶展示/索取價格時，我們應該非常小心。

可能會有更多這樣的情況，我們應該尋找更強大的解決方案。

標籤：javascript html Vue.js

上一篇：無法從另一個.vue檔案呼叫此函式

下一篇：如何在Vue的data()函式中使用外部物件？