时间戳

首页 > 解决方案 > jQuery：从输入数组中获取所有值并将它们计算为变量

javascript - jQuery：从输入数组中获取所有值并将它们计算为变量

问题描述

我有多个输入数组（见片段）。我需要将所有输入的值计算为变量。这是一个发票创建，所以我想知道所有打折商品的总价格。我怎样才能做到这一点？

这就是我现在所拥有的：

$('#addNewPosition').on('click', function(e) {
            e.preventDefault();
            $('#positions').append('<input type="text" name="item[]" placeholder="Item" class="form-control">\n' +
                '            <input type="number" step="any" name="price[]" placeholder="Price" class="form-control">\n' +
                '            <input type="number" name="item_discount[]" placeholder="Discount, %" class="form-control">\n' +
                '            <input type="number" step="any" name="quantity[]" placeholder="Quantity" class="form-control">\n' +
                '            <input type="text" name="quantity_index[]" placeholder="Unit" class="form-control">\n' +
                '            <input type="text" name="description[]" placeholder="Description" class="form-control">\n');
        });

// Get the number of all items added:
var count = $("input[name='item[]']").map(function() {
  return $(this).val();
}).get().length;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="positions">
  <input type="number" step="any" name="price[]" placeholder="Price" class="form-control">
  <input type="number" name="item_discount[]" placeholder="Discount, %" class="form-control">
  <input type="number" step="any" name="quantity[]" placeholder="Quantity" class="form-control">
  <input type="text" name="quantity_index[]" placeholder="Unit" class="form-control">
  <input type="text" name="description[]" placeholder="Description" class="form-control">
  <a href="#" id="addNewPosition" class="btn btn-green">Add new</a>
</div>

我想要实现的只是计算总价：总计=（（每个字段的价格）-折扣，％）*数量

有什么办法可以做到吗？亲切的问候

标签： javascriptjquery

解决方案

您可以委托输入事件，以便在每次价格或折扣发生变化时计算总数。

为了实现您的结果，您可以将.map()与.reduce()结合使用

$('#addNewPosition').on('click', function (e) {
    e.preventDefault();
    $('#positions').append('<div class="form-group">' +
            '<div class="col-sm-1"></div><div class="col-sm-3"><input type="text" name="item[]" placeholder="Item" class="form-control"></div>\n' +
            '            <div class="col-sm-1"><input type="number" step="any" name="price[]" placeholder="Price" class="form-control"></div>\n' +
            '            <div class="col-sm-1"><input type="number" name="item_discount[]" placeholder="Discount, %" class="form-control"></div>\n' +
            '            <div class="col-sm-1"><input type="number" step="any" name="quantity[]" placeholder="Quantity" class="form-control"></div>\n' +
            '            <div class="col-sm-1"><input type="text" name="quantity_index[]" placeholder="Unit" class="form-control"></div>\n' +
            '            <div class="col-sm-3"><input type="text" name="description[]" placeholder="Description" class="form-control"></div>\n' +
            '</div>');
});

$(document).on('input', 'input[name="price[]"], input[name="item_discount[]"], input[name="quantity[]"]', function (e) {
    var price = $('input[name="price[]"]').map(function (idx, ele) {
        return $(ele).val().trim().length == 0 ? 0 : parseFloat($(ele).val().trim());
    }).get();
    var discount = $('input[name="item_discount[]"]').map(function (idx, ele) {
        return $(ele).val().trim().length == 0 ? 0 : parseFloat($(ele).val().trim());
    }).get();
    var quantity = $('input[name="quantity[]"]').map(function (idx, ele) {
        return $(ele).val().trim().length == 0 ? 0 : parseFloat($(ele).val().trim());
    }).get();
    var total = price.reduce(function (a, v, i) {
        return a + (v - (v * discount[i] / 100)) * quantity[i];
    }, 0);
    console.log('total=' + total);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="positions">
    <div class="col-sm-1">
        <input type="number" step="any" name="price[]" placeholder="Price" class="form-control">
    </div>

    <div class="col-sm-1">
        <input type="number" name="item_discount[]" placeholder="Discount, %" class="form-control">
    </div>

    <div class="col-sm-1">
        <input type="number" step="any" name="quantity[]" placeholder="Quantity" class="form-control">
    </div>

    <div class="col-sm-1">
        <input type="text" name="quantity_index[]" placeholder="Unit" class="form-control">
    </div>

    <div class="col-sm-3">
        <input type="text" name="description[]" placeholder="Description" class="form-control">
    </div>

    <a href="#" id="addNewPosition" class="btn btn-green">Add new</a>
</div>

推荐阅读