Javascript JQuery根据所选选项更改价格

如果选择了一个选项，脚本将获得一个价格并将其添加到脚本中。我正在使用的代码：

var basePrice=+（$（'#price'）.html（）；；
$（“.readers”）.change（函数（）{
新价格=基准价格；
$（“.readers选项：选中”）.each（函数（）{
newPrice+=$（此）.data（“#price”）
});
$（“#price”）.html（newPrice.toFixed（2））；
});
299.00美元
放大
没有一个
+1.50
+2.00                   
+2.50
您没有正确解析
#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中删除美元符号和任何其他无效字符，然后不必使用正则表达式提取无效字符，那么成本就会降低

祝您愉快

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


var basePrice=+（$（'#price'）.html（））。替换（/[^0-9\.]+/g，”）；
$（“.readers”）.change（函数（）{
新价格=基准价格；
$（“.readers选项：选中”）.each（函数（）{
newPrice++$（this.attr（'data-price'））
});
$（“#price”）.html（“$”+newPrice.toFixed（2））；
});

$299.00
放大
没有一个
+1.50
+2.00                   
+2.50
您得到的是
NaN
，因为
#price
元素的
innerHTML
属性是一个字符串（它包含一个
$
符号）


var basePrice=+（$（'#price'）.html（）.match（/\d+\.\d+/）[0]）；
$（“.readers”）.change（函数（）{
新价格=基准价格；
$（“.readers选项：选中”）.each（函数（）{
newPrice++$（this.attr（'data-price'）；
});
$（“#price”）.html（“$”+newPrice.toFixed（2））；
});

$299.00
放大
没有一个
+1.50
+2.00                   
+2.50
您可以使用代替，以获取的文本值
跨度标签

由于您的文本包含美元符号，因此您可以使用美元符号获取数字并添加加号进行转换：

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

使用全局变量是没有用的，因为您可以动态计算新值：

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

由于选择标记不是多选标记，因此可以避免循环：

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

不要在数据函数中添加#符号

最后，您可以使用regex模式更改span text值：

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

例如：


$（“.readers”）.change（函数（）{
var newPrice=+$（'#price'）.text（）.split（'$）[1]+$（“.readers选项：选中”）.data（'price'）；
$（'#price'）.text（函数（i，txt）{
返回txt.replace（/[\d.]+/，newPrice.toFixed（2））；
});
});

$299.00
放大
没有一个
+1.50
+2.00
+2.50
+“$299.00”将转换为NaN
$（此）。数据（“#price”）
不正确。您的元素上没有
data-#price
属性，我认为它甚至不起作用。使用
.data（'price'）
。您从代码中得到了什么样的响应？看起来你的值是字符串而不是数字！你测试过吗？我在代码片段中测试过你的代码，实际上它会抛出一个错误。在你的答案中提供JSFIDLE链接。是的，我只是从答案中复制了代码并添加了正则表达式。几秒钟后，我意识到我忘了检查
数据价格
属性，而不是询问者在做什么。我在小提琴上改了，只是没有从那里抄下来/