Question

您好我正在尝试创建一个发票系统。我有一个表单，我为每个订单项添加字段，并且我可以添加和删除表单字段。我的问题是我不知道如何从前置订单项中获取价格并将其添加以获得小计。

这是html，这里没什么有趣的

<div class="form-row">
    <strong>Line Items:</strong>
    <br>
        <div class="line-items">
            <div class="line-item">
                <div class="line-item-box description">
                    <label>Description:</label>
                    <textarea name="description" id="description"></textarea>
            </div>
            <div class="line-item-box quantity">
                <label>Qty:</label>
                <input type="text" name="quantity" id="quantity">
            </div>
            <div class="line-item-box price">
                <label>Price:</label>
                <input type="text" name="price" id="price">
            </div>
            <button class="btn add-item">Add Item</button>
        </div>
    </div>  
</div>

这是jquery

$(document).ready(function() {
    $('.add-item').click(function() {
        var description = $('#description').val();
        var quantity = $('#quantity').val();
        var price = $('#price').val();
        $('.line-items').prepend('<div class="line-item"><div class="line-item-box description">' + description + '</div><div class="line-item-box quantity">' + quantity + '</div><div class="line-item-box price price-saved">$' + price*quantity + '</div><button class="btn remove-btn">Remove</button></div>');
        if (!$('.price-summation')[0]) {
            $('.line-items').append('<div class="price-summation"><div class="price-row">' + subtotal + '</div><div class="price-row">Taxes</div><div class="price-row">Total</div></div>');
        }
        return false;
    });
    $(document).on('click', '.remove-btn', function() {
        $('.line-item').remove();
    });
});

所以我想将每个订单项的价格变量加起来，这些订单项将动态添加到dom中，然后用小计var显示。

这可能吗？如果是这样我怎么能这样做？

Answer 1

总共使用每个循环并对每个解析后的价格值求和，将其放入函数中并在每次更新项目列表时触发它

JS：

   function price_subtotal(){
       var subtotal = 0;
        $('.price-saved').each(function(i,v){
          subtotal+= parseFloat($(v).text().replace('$',''));
        });

        $('.subtotal').html(subtotal);
    }
$(document).ready(function() {
    $('.add-item').click(function() {
        var description = $('#description').val();
        var quantity = $('#quantity').val();
        var price = $('#price').val();
        $('.line-items').prepend('<div class="line-item"><div class="line-item-box description">' + description + '</div><div class="line-item-box quantity">' + quantity + '</div><div class="line-item-box price price-saved">$' + price*quantity + '</div><button class="btn remove-btn">Remove</button></div>');


        if (!$('.price-summation')[0]) {
            $('.line-items').append('<div class="price-summation"><div class="subtotal price-row">0</div><div class="price-row">Taxes</div><div class="price-row">Total</div></div>');
        }
        price_subtotal();
        return false;
    });
    $(document).on('click', '.remove-btn', function() {
        $(this).closest('.line-item').remove();
        price_subtotal();
    });
});

DEMO

如何从prepend / append获取可变数据，并使用jquery进行添加

1 个答案: