Question

如果选择了一个选项，那么会抓住价格并添加到其中的脚本。我正在使用的代码：

<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>

$('#toggle').click(function() {
  $('.slide-in').toggleClass('show');
});

对不起任何交叉发布：我见过相关主题，但无法弄清楚我的问题是什么。

非常感谢任何帮助！

〜n的

Answer 1

您没有正确解析#price中的值。您应该删除无效字符，例如逗号和美元符号，或任何非数字/句点字符，然后将其转换为数字变量，例如：

var basePrice = +($('#price').html()).replace(/[^0-9\.]+/g,"");

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

如果您只是从HTML中删除美元符号和任何其他无效字符，那么会更便宜，但是，您不必使用正则表达式来提取无效字符。

fiddle让您享受。

还有一个片段因为，为什么不呢？

var basePrice = +($('#price').html()).replace(/[^0-9\.]+/g,"");
$(".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>

Answer 2

您收到NaN，因为innerHTML元素的#price属性是一个字符串（它包含一个$符号）。

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>

Answer 3

您可以使用.html()代替.text()来获取文本值 span tag。

由于您的文字包含美元符号，因此您可以使用String.prototype.match()获取该号码并添加加号进行转换：

+$('#price').text().match(/[\d.]+/)[0]

拥有一个全局变量是没用的，因为你可以动态计算新值：

var newPrice = +$('#price').text().split('$')[1] + +$(".readers option:selected").data('price');

因为你的select标签不是多选，你可以避免循环：

$(".readers option:selected").each(function() {

请勿在数据功能中添加＃符号。

最后，您可以使用正则表达式模式更改范围文本值：

txt.replace(/[\d.]+/, newPrice.toFixed(2));

示例：

$(".readers").change(function() {
  var newPrice = +$('#price').text().split('$')[1] + +$(".readers option:selected").data('price');
  $('#price').text(function(i, txt) {
      return txt.replace(/[\d.]+/, 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>

JQuery根据选定的选项更改价格

3 个答案: