jQuery簡單的價格*數量總計多個項目

Question

我正在尋找加載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> 

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（）並使用一元加運算符轉換為數值的工作示例

碼：

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

我認為發現可能會導致性能下降。

使用普通的類選擇器。

我發現這篇文章是一樣的

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

你需要做的是將變量解析為它的類型，即數字或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