![](/img/trans.png)
[英]Jquery calculate sub total from fields - qty and price by class and grand Total sum
[英]jQuery simple price * qty total on multiple items
我正在寻找加载item
多个实例的自动total
计算。 我试着找到每个item
的price
和qty
,但总数不计算。
$(document).ready(function() { $('.item').each(function() { var qty = $(this).find('.qty').val(); var price = $(this).find('.price').val(); var total = qty * price; $('.total').val(total); }); });
.item { border: 1px solid }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="item"> <div class="qty">50</div> <div class="price">10</div> <div class="total">0</div> </div> <div class="item"> <div class="qty">20</div> <div class="price">50</div> <div class="total">0</div> </div> <div class="item"> <div class="qty">19</div> <div class="price">40</div> <div class="total">0</div> </div>
您需要使用文本和数字函数来计算:
$(document).ready(function() {
$('.item').each(function() {
var qty = $(this).find('.qty').text();
var price = $(this).find('.price').text();
var total = Number(qty) * Number(price);
$(this).find('.total').text(total);
});
});
这是一个使用jQuery #text()并使用一元加运算符转换为数值的工作示例
码:
$('.item').each(function() { $this = $(this); $this.find('.total').text( +$this.find('.qty').text() * +$this.find('.price').text() ); });
.item { border: 1px solid }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="item"> <div class="qty">50</div> <div class="price">10</div> <div class="total">0</div> </div> <div class="item"> <div class="qty">20</div> <div class="price">50</div> <div class="total">0</div> </div> <div class="item"> <div class="qty">19</div> <div class="price">40</div> <div class="total">0</div> </div>
我认为发现可能会导致性能下降。
使用普通的类选择器。
我发现这篇文章是一样的
// Find may cause performace overhead. $('.item').each(function() { $this = $(this); $('.total',$this).text( +$('.qty',$this).text() * +$('.price',$this).text() ); });
.item { border: 1px solid #d4d4d4 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="item"> <div class="qty">50</div> <div class="price">10</div> <div class="total">0</div> </div> <div class="item"> <div class="qty">20</div> <div class="price">50</div> <div class="total">0</div> </div> <div class="item"> <div class="qty">19</div> <div class="price">40</div> <div class="total">0</div> </div>
你需要做的是将变量解析为它的类型,即数字或Int或Float
$(document).ready(function() {
$('.item').each(function() {
var qty = $(this).find('.qty').val();
var price = $(this).find('.price').val();
var total = parseFloat(qty) * parseFloat(price);
$('.total').val(total);
});
});
您也可以将parseFloat
替换为Number
。 此外,如果您不需要十进制值,请使用parseInt
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.