使用 jQuery 将 2 个 HTML 类相乘并输出总数答案

【问题标题】：Multiply 2 HTML classes and output total using jQuery使用 jQuery 将 2 个 HTML 类相乘并输出总数
【发布时间】：2016-07-22 18:32:07
【问题描述】：

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

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

我使用 jQuery 尝试了以下方法，但我对此不太熟悉 - https://jsfiddle.net/e8shpr0e/

$('.total').html(
  parseFloat($('.tm-show-picker-value').text()) * parseFloat($('.price amount final').text())
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="tm-show-picker-value" for="tmcp_range_4">24</label>
<span class="price amount final">£20.00</span>
<div class="total"></div>

任何帮助都会很棒。

【问题讨论】：

请在此处也包含您的代码。
parseFloat($('.price').text()) 返回 NaN 因为数字前面有符号。

标签： javascript jquery html multiplication

【解决方案1】：

您的代码中有 2 个问题。

不应在类名中使用空格。
您的“美元”符号导致解析浮点数时出错。

使用following code。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<label class="tm-show-picker-value" for="tmcp_range_4">24</label>
<span class="price_amount_final">£20.00</span>
<div class="total"></div>



var quantity = parseFloat($('.tm-show-picker-value').text());
var cost = parseFloat($('.price_amount_final').text().replace("£", ""));
$('.total').text("£" + quantity * cost );

【讨论】：

或者OP可以使用这个选择器：.price.amount.final
@SlipperyPete 我第二。我没有提到这一点，因为根据使用的术语，我猜测编码器的意思是使用 1 阶段而不是单独的类
不错！打败我

【解决方案2】：

三个问题：

在 JSFiddle 中，您必须包含 jQuery 库。在 JavaScript > Frameworks and Extensions > 版本下添加这个
删除文本中的非数字字符。我建议通过.replace(/[^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, "")))

Fixed JSFiddle

【讨论】：

【解决方案3】：

类似的东西。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="tm-show-picker-value" for="tmcp_range_4">24</label>
<span class="price amount final">£20.00</span>
<div class="total"></div>

【讨论】：

【解决方案4】：

试试这个 sn-p。

var priceRange = $('.tm-show-picker-value').html();
var priceAmount = $('.final').html();
var removeEuro = priceAmount.replace("£", "");
var total = parseFloat(removeEuro) * parseFloat(priceRange);
$('.total').text(total);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="tm-show-picker-value" for="tmcp_range_4">24</label>
<span class="price amount final">£20.00</span>
<div class="total"></div>

【讨论】：

【解决方案5】：

好的，您的 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>

【讨论】：