Question

我的页面中有以下结构：

字段集：

大小的

选项的

显示是，现在和你节省价格

然后我将JQuery转换为float并以百分比显示Save Price。这一切都按预期工作，直到我更改例如大小和选项。为了解决这个问题，我尝试使用.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

jQuery('.old-price-item .price .price').text()返回""（空字符串），因此parseFloat()为NaN。

Answer 2

根据提供的HTML，您似乎错误地将名为＆＃34; price＆＃34;的类选择器加倍。在jQuery选择器中。

请尝试这些：

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

更改函数返回NaN值

2 个答案: