乘以 2 HTML 类并使用 jQuery 输出总数

Question

我想将下面两个字段的内容相乘并在另一个字段中输出总数 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>

任何帮助都会很棒。

Answer 1

您的代码中有 2 个问题。

你不应该在你的类名中使用 space。
您的 "dollar" 符号导致解析浮点数时出错。

使用 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 );

Answer 2

三个问题：

在 JSFiddle 中，您必须包含 jQuery 库。在 JavaScript > Frameworks and Extensions > Version
删除文本中的非数字字符。我建议通过 .replace(/[^0-9\.]/g, "")
要链接 class 个名称，不要在它们之间放置 space。相反，将它们并排放置，每个前面都有一个点，就像 CSS 中那样。它应该是一个有效的 CSS 选择器，像这样：.price.amount.final

综上所述，这是固定代码：

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

Fixed JSFiddle

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

Answer 4

试试这个片段。

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>

Answer 5

好的，html 中的 class for 'price amount final' 是三个独立的 classes 你需要添加连字符所以 class 是 'price-final-amount' 我还稍微清理了你的代码以使其更具可读性：

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>

乘以 2 HTML 类并使用 jQuery 输出总数

Multiply 2 HTML classes and output total using jQuery

html

javascript

jquery

multiplication

乘以 2 HTML 类 并使用 jQuery 输出总数

Multiply 2 HTML classes and output total using jQuery

html

javascript

jquery

multiplication

乘以 2 HTML 类并使用 jQuery 输出总数