Javascript 使用jQuery乘以2个HTML类并输出总计

我想将下面两个字段的内容相乘，并在另一个div（24*20.00）中输出总数：

24
£20.00

您的代码中有两个问题

您不应该在类名中使用空格

您的“美元”符号导致错误解析您的浮动

使用

24
£20.00
var quantity=parseFloat（$（'.tm show picker value'）.text（）；
var cost=parseFloat（$（'.price\u amount\u final'）.text（）.replace（“，”）；
$（'total'）。文本（“£”+数量*成本）；

您的代码中有两个问题

您不应该在类名中使用空格

您的“美元”符号导致错误解析您的浮动

使用

24
£20.00
var quantity=parseFloat（$（'.tm show picker value'）.text（）；
var cost=parseFloat（$（'.price\u amount\u final'）.text（）.replace（“，”）；
$（'total'）。文本（“£”+数量*成本）；

三个问题：

在JSFIDLE中，必须包含jQuery库。将其添加到JavaScript>框架和扩展>版本下

删除文本中的非数字字符。我建议通过

执行此操作。替换（/[^0-9\.]/g，”）

要链接类名，不要在它们之间加空格。相反，把它们放在一起，前面有一个点，就像在CSS中一样。它应该是一个有效的CSS选择器，如下所示：

.price.amount.final

总之，这是固定代码：

$('.total').text( parseFloat($('.tm-show-picker-value').text()) * parseFloat($('.price.amount.final').text().replace(/[^0-9\.]/g, "")))

三个问题：

在JSFIDLE中，必须包含jQuery库。将其添加到JavaScript>框架和扩展>版本下

删除文本中的非数字字符。我建议通过

执行此操作。替换（/[^0-9\.]/g，”）

要链接类名，不要在它们之间加空格。相反，把它们放在一起，前面有一个点，就像在CSS中一样。它应该是一个有效的CSS选择器，如下所示：

.price.amount.final

总之，这是固定代码：

$('.total').text( parseFloat($('.tm-show-picker-value').text()) * parseFloat($('.price.amount.final').text().replace(/[^0-9\.]/g, "")))

类似这样的事情

$（'.total'）.html(
“£”+parseFloat（$（'.tm show picker value'）.text（））*parseFloat（$（'.price'）.text（）.split（'£'）[1]）
)

24
£20.00

类似这样的东西

$（'.total'）.html(
“£”+parseFloat（$（'.tm show picker value'）.text（））*parseFloat（$（'.price'）.text（）.split（'£'）[1]）
)

24
£20.00

试试这个片段

var priceRange=$（'.tm show picker value'）.html（）；
var priceAmount=$（'.final'）.html（）；
var removeEuro=价格金额。替换（“£”和“”）；
var total=parseFloat（removeEuro）*parseFloat（priceRange）；
$（'.total'）.text（总计）

24
£20.00
试试这个片段


var priceRange=$（'.tm show picker value'）.html（）；
var priceAmount=$（'.final'）.html（）；
var removeEuro=价格金额。替换（“£”和“”）；
var total=parseFloat（removeEuro）*parseFloat（priceRange）；
$（'.total'）.text（总计）

24
£20.00
好的，html中“价格-金额-最终”的类是三个独立的类，您需要添加连字符，因此该类是“价格-最终金额”，我还稍微整理了您的代码，使其更具可读性：

var mult = $('.tm-show-picker-value').text()
var amt = $('.price-amount-final').text()
var total = parseFloat(mult) * parseInt(amt)
$('.total').text(total)

您的HTMl如下所示：

<label class="tm-show-picker-value" for="tmcp_range_4">24</label>
<span class="price-amount-final">20.00</span>
<div class="total"></div>

24
20
好的，html中“价格-金额-最终”的类是三个独立的类，您需要添加连字符，因此该类是“价格-最终金额”，我还稍微整理了您的代码，使其更具可读性：

var mult = $('.tm-show-picker-value').text()
var amt = $('.price-amount-final').text()
var total = parseFloat(mult) * parseInt(amt)
$('.total').text(total)

您的HTMl如下所示：

<label class="tm-show-picker-value" for="tmcp_range_4">24</label>
<span class="price-amount-final">20.00</span>
<div class="total"></div>

24
20
请在此处也包含您的代码。
parseFloat（$（'.price'）.text（））
返回
NaN
，因为数字前面有符号。请在此处也包含您的代码。
parseFloat（$（'.price'）.text（））
返回
NaN
，因为数字前面有符号。或者OP可以使用此选择器：
.price.amount.final
@sliperypet，我支持它。我没有提到这一点，因为根据使用的术语，我猜编码器打算使用1个阶段，而不是单独的classesNice！请告诉我，我可以使用这个选择器：
.price.amount.final
@slipperypet，我支持。我没有提到这一点，因为根据使用的术语，我猜编码器打算使用1个阶段，而不是单独的classesNice！比我快