javascript - 更改函数返回 NaN 值

Question

我的页面具有以下结构:

字段集:

尺寸

选项

这显示了过去、现在，您可以节省价格

然后我有 JQuery 将上面的内容转换为 float 并以百分比显示节省价格。一切都按预期工作，直到我更改大小和选项等。为了克服这个问题，我尝试使用 .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