Question

我正在创建一个预算应用，用户可以在其中投放产品和价格。我希望它通过将每个输入值（HTML5类型=数字）添加到下一个添加的行中输入的数字来显示总成本。

段：

＆＃13;

$(document).ready(function() {

  $('.food').click(function() {
    var $frm = $(this).parent();
    var toAdd = $frm.children(".productInput").val();
    var addPrice = $frm.children(".priceInput").val();
    var addAmount = $frm.children(".amountInput").val();


    var div = $("<div>");
    div.append("<p>" + addAmount + "</p>", "<p id='product'> " + toAdd + " </p>", "<p>" + addPrice + "</p>");

    $frm.parent().children(".messages").append(div);

    $(".totalPrice").text("Total Price" + addAmount * addPrice);

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="menu">
  <h3>Shopping list</h3>
  <div class="line">
    <div>
      <input class='amountInput' type='number' name='quantity' min='0' max='1000' step='1'>
      <input class='productInput' type="text" name="message" value="">
      <input class='priceInput' type='number' name='quantity' min='0' max='1000000' step='0.01'>
      <button class="food">Add</button>
    </div>
    <div class="messages">
    </div>
  </div>
</div>
<div class="totalPrice">

＆＃13;

我该怎么做？：）

谢谢

Answer 1

在点击功能之外创建一个totalPrice变量。每次添加新项目时，请将addAmount * addPrice添加到totalPrice。然后在totalPrice div中显示.totalPrice，而不是最后添加的项目的addAmount * addPrice。

您可能还希望在显示.toFixed()时为totalPrice添加电话。调用totalPrice.toFixed(2)将确保您只显示两位小数，这样它就是货币值的正确格式。

工作示例：

＆＃13;

$(document).ready(function() {
  
  var totalPrice = 0;

  $('.food').click(function() {
    var $frm = $(this).parent();
    var toAdd = $frm.children(".productInput").val();
    var addPrice = $frm.children(".priceInput").val();
    var addAmount = $frm.children(".amountInput").val();


    var div = $("<div>");
    div.append("<p>" + addAmount + "</p>", "<p id='product'> " + toAdd + " </p>", "<p>" + addPrice + "</p>");

    $frm.parent().children(".messages").append(div);
    
    totalPrice += addAmount * addPrice;

    $(".totalPrice").text("Total Price: $" + totalPrice.toFixed(2));

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <h3>Shopping list</h3>
  <div class="line">
    <div>
      <input class='amountInput' type='number' name='quantity' min='0' max='1000' step='1'>
      <input class='productInput' type="text" name="message" value="">
      <input class='priceInput' type='number' name='quantity' min='0' max='1000000' step='0.01'>
      <button class="food">Add</button>
    </div>
    <div class="messages">
    </div>
  </div>
</div>
<div class="totalPrice"></div>

＆＃13;

Answer 2

在函数之外声明一个全局变量

$(document).ready(function() {

var totalPrice=0;

$('.food').click(function() {
..

在计算总价时执行此操作

totalPrice = totalPrice + (addAmount * addPrice);
$(".totalPrice").text("Total Price" + totalPrice);

将输入值添加到另一个值作为总和

2 个答案: