如何计算附加对象的总价 javascript

Question

我在这里需要一点帮助，所以当我从动态添加 select 选项添加选项并单击订购按钮时，它将显示我选择的选项。

下一步，我需要计算我选择的选项的总和。我尝试了之前找到的一些提示，但没有任何效果。

我为求和结果添加了禁用输入。有什么建议我可以在这里使用什么方法吗？

完整代码如下：

var data = {Food:[{id:1,name:"Fried Rice",price:1e4},{id:2,name:"Fried Noodle",price:9e3},{id:3,name:"Pancake",price:8500},{id:4,name:"French Fries",price:7500}],Drink:[{id:1,name:"Cola",price:4600},{id:2,name:"Orange Juice",price:5400},{id:3,name:"Mineral Water",price:3500},{id:4,name:"Coffee",price:5800}]};

function handleChange(e) {
  var $row = e ? $(e).closest(".menu-position") : $('.menu-position')
  var selectedCategory = $row.find('.category-select').val()
  var $typeSelect = $row.find('.type-select')
  var dataOptions = data[selectedCategory]

  $typeSelect.html('')

  dataOptions.forEach(function(option) {
    var optionEle = document.createElement('option')
    optionEle.value = option.id
    optionEle.label = option.name
    optionEle.setAttribute('data-price', option.price)
    $typeSelect.append(optionEle)
  })
}

handleChange()

$(".addRow").click(function () {
            var $typeSelect = $(".type-select").clone()
            var html = '<div class="row outer menu-position">';
            html += '<div class="col-md-3">';
            html += '<button type="button" class="btn btn-danger btn-lg delRow">Del</button>';
            html += '</div>';
            html += '<div class="col-md-3">';
            html += '<select class="form-select form-select-lg mb-3 category-select cat" onChange="handleChange(this)">';
            html += '<option value="Food">Food</option>';
            html += '<option value="Drink">Drink</option>';
            html += '</select>';
            html += '</div>';
            html += '<br>';
            html += '<div class="col-md-3">';
            html += '<select class="form-select form-select-lg mb-3 type-select type">' + $typeSelect.html() + '</select>';
            html += '</div>';
            html += '<div class="col-md-3">';
            html += '<input type="number" class="form-control form-control-lg mb-3 qty" placeholder="Qty" min="0">';
            html += '</div>';
            html += '</div>';

            $('.container-fluid').append(html);
        });

        $(document).on('click', '.delRow', function () {
            $(this).closest('.row').remove();
            $('.order').trigger('click')
        });

        $(document).ready(function () {
            $('.order').click(function () {
                var selectMenu = {};
                $("select.type").each(function (i) {
                    selectMenu[i] = {}
                    var text = $(this).find("option:selected").attr('label');
                    var price = Number($(this).find("option:selected").data('price'));
                    var qty = Number($(this).closest(".row").find(".qty").val())
                    selectMenu[i] = {
                        "total": price * qty,
                        "itemname": text
                    }
                })

                $('.result tbody').html("");
                $.each(selectMenu, function (index, data) {
                    $('.result tbody').append("<tr class='orders'><td>" + data.itemname + '</td><td>' + data.total + "</td></tr>");
                })
            });
        });

button[type=submit] {
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;
}

button[type=button] {
  font-size: 20px;
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
        <div class="container-fluid text-center">
            <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
            <br>
            <div class="row menu-position">
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary btn-lg addRow">Add</button>
                </div>
                <div class="col-md-3">
                    <select class="form-select form-select-lg mb-3 category-select cat" onChange='handleChange(this)'>
                        <option value="Food">Food</option>
                        <option value="Drink">Drink</option>
                    </select>
                </div>
                <br>
                <div class="col-md-3">
                    <select class="form-select form-select-lg mb-3 type-select type"></select>
                </div>
                <div class="col-md-3">
                    <input type="number" class="form-control form-control-lg mb-3 qty" placeholder="Qty" min="0">
                </div>
            </div>
        </div>
    </div>
    <br>
    <button type="submit" class="btn btn-secondary order">Order</button>
    <br>
    <br>
    <div class="result text-center">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th style="width:50%">Item name</th>
                    <th style="width:50%">Price</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <br>
    <div class="totalPrice text-center">
        <h4>Total Price</h4>
        <input type="number" disabled> <!-- sum price result here -->
    </div>

Answer 1

因为你已经在使用 each 循环来显示你的 trs 你可以声明一些变量，即 total 然后在每个循环中只需使用 total += parseInt(data.total) 然后在你的输入中显示相同.

演示代码 :

var data = {
  Food: [{
    id: 1,
    name: "Fried Rice",
    price: 1e4
  }, {
    id: 2,
    name: "Fried Noodle",
    price: 9e3
  }, {
    id: 3,
    name: "Pancake",
    price: 8500
  }, {
    id: 4,
    name: "French Fries",
    price: 7500
  }],
  Drink: [{
    id: 1,
    name: "Cola",
    price: 4600
  }, {
    id: 2,
    name: "Orange Juice",
    price: 5400
  }, {
    id: 3,
    name: "Mineral Water",
    price: 3500
  }, {
    id: 4,
    name: "Coffee",
    price: 5800
  }]
};

function handleChange(e) {
  var $row = e ? $(e).closest(".menu-position") : $('.menu-position')
  var selectedCategory = $row.find('.category-select').val()
  var $typeSelect = $row.find('.type-select')
  var dataOptions = data[selectedCategory]

  $typeSelect.html('')

  dataOptions.forEach(function(option) {
    var optionEle = document.createElement('option')
    optionEle.value = option.id
    optionEle.label = option.name
    optionEle.setAttribute('data-price', option.price)
    $typeSelect.append(optionEle)
  })
}

handleChange()

$(".addRow").click(function() {
  var $typeSelect = $(".type-select").clone()
  var html = '<div class="row outer menu-position">';
  html += '<div class="col-md-3">';
  html += '<button type="button" class="btn btn-danger btn-lg delRow">Del</button>';
  html += '</div>';
  html += '<div class="col-md-3">';
  html += '<select class="form-select form-select-lg mb-3 category-select cat" onChange="handleChange(this)">';
  html += '<option value="Food">Food</option>';
  html += '<option value="Drink">Drink</option>';
  html += '</select>';
  html += '</div>';
  html += '<br>';
  html += '<div class="col-md-3">';
  html += '<select class="form-select form-select-lg mb-3 type-select type">' + $typeSelect.html() + '</select>';
  html += '</div>';
  html += '<div class="col-md-3">';
  html += '<input type="number" class="form-control form-control-lg mb-3 qty" placeholder="Qty" min="0">';
  html += '</div>';
  html += '</div>';

  $('.container-fluid').append(html);
});

$(document).on('click', '.delRow', function() {
  $(this).closest('.row').remove();
  $('.order').trigger('click')
});

$(document).ready(function() {
  $('.order').click(function() {
    var selectMenu = {};
    $("select.type").each(function(i) {
      selectMenu[i] = {}
      var text = $(this).find("option:selected").attr('label');
      var price = Number($(this).find("option:selected").data('price'));
      var qty = Number($(this).closest(".row").find(".qty").val())
      selectMenu[i] = {
        "total": price * qty,
        "itemname": text
      }
    })

    $('.result tbody').html("");
    var total = 0 //decalre this
    $.each(selectMenu, function(index, data) {
      $('.result tbody').append("<tr class='orders'><td>" + data.itemname + '</td><td>' + data.total + "</td></tr>");

      total += parseInt(data.total); //sum total
    })
    $(".totalPrice input").val(total) //show inside inputs
  });
});

button[type=submit] {
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;
}

button[type=button] {
  font-size: 20px;
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
  <div class="container-fluid text-center">
    <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
    <br>
    <div class="row menu-position">
      <div class="col-md-3">
        <button type="button" class="btn btn-primary btn-lg addRow">Add</button>
      </div>
      <div class="col-md-3">
        <select class="form-select form-select-lg mb-3 category-select cat" onChange='handleChange(this)'>
          <option value="Food">Food</option>
          <option value="Drink">Drink</option>
        </select>
      </div>
      <br>
      <div class="col-md-3">
        <select class="form-select form-select-lg mb-3 type-select type"></select>
      </div>
      <div class="col-md-3">
        <input type="number" class="form-control form-control-lg mb-3 qty" placeholder="Qty" min="0">
      </div>
    </div>
  </div>
</div>
<br>
<button type="submit" class="btn btn-secondary order">Order</button>
<br>
<br>
<div class="result text-center">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th style="width:50%">Item name</th>
        <th style="width:50%">Price</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>
<br>
<div class="totalPrice text-center">
  <h4>Total Price</h4>
  <input type="number" disabled>
  <!-- sum price result here -->
</div>

Answer 2

我不明白你的问题。但我想你想把所有的价格加起来。所以我为你做了一些代码。希望有用

let data= {Food:[{id:1,name:"Fried Rice",price:1e4},{id:2,name:"Fried Noodle",price:9e3},{id:3,name:"Pancake",price:8500},{id:4,name:"French Fries",price:7500}],Drink:[{id:1,name:"Cola",price:4600},{id:2,name:"Orange Juice",price:5400},{id:3,name:"Mineral Water",price:3500},{id:4,name:"Coffee",price:5800}]};
let keys = Object.keys(data)
console.log(keys)//["Food", "Drink"]
let price = 0
for (let i = 0; i < keys.length; i++) {
    let items = data[keys[i]] //Access the values of the key
    for (let j = 0; j < items.length; j++) {
        console.log(items[j].price) //10000 ....(in loop)
        price = price + items[j].price

    }

}
console.log(price)//54300

如何计算附加对象的总价 javascript

how to count sum price from an appended object javascript

html

javascript

jquery

html-select

append