Question

我正在为加载的total的多个实例寻求自动item的计算。我尝试为每个price查找qty和item，但总数并未计算出来。

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

Answer 1

您需要使用文本和数字功能来计算：

$(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);
  });
});

Answer 2

这是一个使用jQuery#text()并通过unary plus operator转换为数值的工作示例

代码：

$('.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>

Answer 3

我认为发现可能会导致性能下降。

使用普通的类选择器。

我同样找到了这个article

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

Answer 4

您要做的是将变量解析为类型，即解析为Numbers或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

jQuery简单价格*多个项目的总数量

4 个答案: