javascript - 如何使用javascript显示和更新总价？

因此，我想添加产品，同时更新购物车中的总价。

$(".articel input[type='button']").click(function() {
    var price = $(this).siblings("input[name='price']").attr("value");
    var quantity = $(this).siblings("input[type='number']").attr("value");

    if (quantity % 1 != 0) {
        alert("You must add a whole number");
    }
    else if (quantity <= 0) {
        alert("You can not add a negative number or nothing");
    }
    else {
        var name = $(this).siblings("input[name='prodname']").attr("value");
        var ul = document.getElementById("buylist");
        var totalprice = quantity * price;
        var prod = name + " x " + quantity + "= " + totalprice + "$";
        var el = document.createElement("li");
        el.innerHTML = prod;
        ul.appendChild(el);
    }
});
});

这是产品和总价增加的地方：

<h4>Shopping Cart</h4>
<div id="buylist">
    <ul>
    </ul>
    <div id="totalprice">
        <h4>Total price:<h4>
    </div>
</div>

<a href="#checkout" onClick="checkOut()" class="click" data-toggle="tab" id="form">Checkout</a>
</div>

这是我将产品添加到购物车的一种形式

<form class="articel">
    Quantity: <input type="number" style="width:30px;"><br>
    Add to cart: <input type="button" class="btn">
    <input type="hidden" value="30" name="price">
    <input type="hidden" value="The walking dead" name="prodname">
</form>

最佳答案

也许我不太了解。但是，当产品或其数量发生变化时，您必须计算价格。我建议您已经为这两个操作都创建了一个事件。然后，我将运行一个计算价格的函数。

现在，这取决于您是否已有固定价格，或者还必须将其乘以数量。循环浏览产品并计算价格。

注意：要选择价格和数量，我使用了代码中实际上没有的选择器。

function calculatePrice() {
    var quantity, price, sum = 0;
    //loop through product "blocks"
    $('.articel').each(function() {
        price = $(this).children('.price').val();
        quantity = $(this).children('.quantity').val();
        //Add price to sum if number
        if (!isNaN(price) && !isNaN(quantity)) {
            sum += price * quantity;
        }
    });
    //Update Price
    $('#totalprice').html('<h4>Total price:' + sum + '</h4');
}