javascript - JQuery 根据所选选项更改价格

Question

与脚本斗争，该脚本会获取价格并在选择选项时添加到价格中。我正在使用的代码:

var basePrice = +($('#price').html());;

$(".readers").change(function() {
  newPrice = basePrice;
  $(".readers option:selected").each(function() {
    newPrice += $(this).data('#price')
  });
  $("#price").html(newPrice.toFixed(2));
});

<span class="product-price" itemprop="price" id="price">$299.00</span>
<label>Magnification</label>
<select class="product-variants readers" id="readers" name="readers">
           <option data-price="0" value="0">None</option>
    <option data-price="40" value="+1.50">+1.50</option>
     <option data-price="40" value="+2.00">+2.00</option>                   
    <option data-price="40" value="+2.50">+2.50</option>
</select>

对任何交叉发布表示抱歉:我已经看过相关的帖子，但无法弄清楚我的情况的问题是什么。

非常感谢任何帮助!

~N。

Answer 1

您正在获取NaN因为innerHTML #price 的属性element 是一个字符串(它包含 $ 符号)。

var basePrice = +($('#price').html().match(/\d+\.\d+/)[0]);

$(".readers").change(function() {
  newPrice = basePrice;
  $(".readers option:selected").each(function() {
    newPrice += +$(this).attr('data-price');
  });
  $("#price").html('$' + newPrice.toFixed(2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="product-price" itemprop="price" id="price">$299.00</span>
<label>Magnification</label>
<select class="product-variants readers" id="readers" name="readers">
           <option data-price="0" value="0">None</option>
    <option data-price="40" value="+1.50">+1.50</option>
     <option data-price="40" value="+2.00">+2.00</option>                   
    <option data-price="40" value="+2.50">+2.50</option>
</select>