javascript - 如何从 prepend/append 中获取变量数据并使用 jquery 进行加法

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 中的每个订单项添加价格变量，然后将其与小计变量一起显示。

这可能吗？如果可以，我该怎么做？

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