更改函数返回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。