更改函數返回NaN的價值

Question

我在我的網頁的結構如下：

字段集：

尺寸

選項

，顯示有，如今和你保存價格

然後我有JQuery的地方，將上述轉換爲浮動，並顯示保存價格的百分比。它一切都按預期工作，直到我改變大小和選項。爲了克服這個問題，我嘗試使用.change(function()。但是，當我更改所選菜單的值並返回NaN。 你能幫忙嗎？

這是我的JS代碼：

$(".product-options").change(function() { 
 

 

 
     var oldPrice = parseFloat(jQuery('.old-price-item .price .price').text().replace('£', ''), 10); 
 
     var savePrice = parseFloat(jQuery('.special-price .price .price').text().replace('£', ''), 10); 
 
     var youSave = savePrice/(oldPrice/100); 
 
     var n = parseFloat(youSave).toFixed(2); 
 

 
     $('div.ratio-div').html('<p>' + n + ' % OFF</p>'); 
 

 
     $('div.save-price-div').html('<p>£' + savePrice + ' OFF</p>'); 
 

 

 
    }).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="options-container-big"> 
 
    <fieldset class="product-options" id="product-options-wrapper"> 
 
    <dl class="attribute-list"> 
 
     <dt id="attribute122_row" style="position: relative;"><label class= 
 
      "required product-options__label" for= 
 
      "attribute122">Size</label></dt> 
 
     <dd> 
 
     <div class="input-select input-select--alternate"> 
 
      <select class="validate-select super-attribute-select validation-passed" data-attribute="item-size" data-choosetxt="Size" data-role="none" id="attribute122" name="super_attribute[122]"> 
 
      <option value=""> 
 
       Size 
 
      </option> 
 
      <option value="235"> 
 
       Single 
 
      </option> 
 
      <option value="238"> 
 
       Double 
 
      </option> 
 
      <option value="239"> 
 
       King 
 
      </option> 
 
      </select> 
 
     </div><span class="item-size-warning" id="attribute122-warning" style="display:none;"></span> 
 
     </dd> 
 
     <dt id="attribute129_row" style="position: relative;"><label class= 
 
      "required product-options__label" for= 
 
      "attribute129">Storage</label></dt> 
 
     <dd class="last"> 
 
     <div class="input-select input-select--alternate"> 
 
      <select class="validate-select super-attribute-select" data-attribute="storage" data-choosetxt="Storage" data-role="none" id="attribute129" name="super_attribute[129]"> 
 
      <option value=""> 
 
       Storage 
 
      </option> 
 
      <option value="310"> 
 
       No Drawers 
 
      </option> 
 
      <option value="312"> 
 
       2 Drawers 
 
      </option> 
 
      <option value="313"> 
 
       4 Drawers 
 
      </option> 
 
      </select> 
 
     </div> 
 
     </dd> 
 
    </dl> 
 
    </fieldset> 
 
    <div class="product-options-bottom"> 
 
    <div class="add-to-cart"> 
 
     <div class="price-box"> 
 
     <div class="old-price"> 
 
      <ul id="old-price-15511"> 
 
      <li class="old-price-item"> 
 
       <div class="line-through"> 
 
       &nbsp; 
 
       </div><span class="price-label">Was</span> 
 
       <span class="price"><span class= 
 
          "currency">£</span></span> 
 
      </li> 
 
      <li class="old-price-item"> 
 
       <div class="line-through"> 
 
       &nbsp; 
 
       </div><span class="price-label">Was</span> 
 
       <span class="price"><span class= 
 
          "currency">£</span></span> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <p class="special-price"><span class="price-label">You 
 
       Save</span> <span class="currency-special-price">£</span> 
 
      <span class="price" id="price-excluding-tax-15511"></span> 
 
     </p><span class="regular-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer"></span> 
 
     <meta content="GBP"> 
 
     </div> 
 
     <div class="product-stock-status"> 
 
     <div class="product-stock-status__wrapper"> 
 
      <span class="title">In Stock</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

請注意字段集的大小隻或大小不同+選項提供不同的價格。

Answer 1

根據提供的HTML，看起來您錯誤地將jQuery選擇器中名爲「price」的類選擇器加倍。

嘗試這些替代：

var oldPrice = parseFloat(jQuery('.old-price-item .price .currency').last().text().replace('£', ''), 10); 
var savePrice = parseFloat(jQuery('.special-price .price').text().replace('£', ''), 10); 

我們很難確切知道，因爲缺少HTML的數字。我想你要麼編輯出價格，要麼是由其他未顯示的腳本動態生成的。

下面是一個削減版的HTML來說明你的選擇是選擇什麼：

http://jsbin.com/heduju/5/edit?html,js,console,output

更新

只注意到有到第一選擇多場比賽，所以我將.last()添加到選擇器（假設最後一個是價格用於計算）。

http://jsbin.com/jegeqe/17/edit?html,js,console,output

Answer 2

jQuery('.old-price-item .price .price').text()返回""（空字符串），所以parseFloat()是NaN。