使用jQuery

Question

我想将2个字段下面的内容相乘，然后在另一个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个问题。

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

Answer 2

三个问题：

1. 在JSFiddle中，您必须包含jQuery库。在JavaScript＆gt;下添加此项框架和扩展＆gt;版本

2. 删除文本中的非数字字符。我建议通过.replace(/[^0-9\.]/g, "")

执行此操作

3. 要链接类名，请不要在它们之间放置空格。相反，将它们放在彼此旁边，每个前面都有一个点，就像在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

试试这个代码段。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

好的，你的html中的课程价格最终为＆＃39;你需要添加连字符的三个单独的类，所以这个类是“价格 - 最终金额”＆＃39;我还清理了一些代码以使其更具可读性：

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>