代码之家 › 专栏 › 技术社区 › Kyle Underhill

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

jquery javascript

Kyle Underhill · 技术社区 · 7 年前

我在找自动售货机 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>

4 回复 | 直到 7 年前

McBern 7 年前

您需要使用文本和数字函数来计算:

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

Yosvel Quintero 7 年前

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>

Kaushik 7 年前

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

使用普通类选择器。

我找到了这个 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>

Sushil 7 年前

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