如何使用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); 
    }
});
});

$（“.articel输入[type='button']”）。单击（函数（）{
var price=$（this.sibbins（“输入[name='price']”）attr（“值”）；
var quantity=$（this.sibbines（“输入[type='number']））.attr（“值”）；
如果（数量%1！=0）{
警报（“您必须添加一个整数”）；
}
如果（数量如果您将价格和数量添加到UL中，您可以轻松处理：

<ul>
  <li data-quantity="X" data-price="Z">...</li>
</ul>

然后在代码中，还有最后一个：

itemPrice = quantity * price;
var prodDesc = name + " x " + quantity + "= " + itemPrice + "$";//same as it was.
var newLi = $("<li>");
newLi.text(prodDesc).data('quantity', quantity).data('price', price);
ul.append(newLi);
var totalPrice = calcTotal(ul);
$('#totalprice h4').text('Total Price: ' + totalPrice);

itemPrice=数量*价格；
var prodDesc=name+“x”+quantity+“=”+itemPrice+“$”；//与原来一样。
var newLi=$（“
”）；
newLi.text（prodDesc）.data（'quantity'，quantity.）.data（'price'，price）；
ul.追加（newLi）；
var总价格=calcTotal（ul）；
$（'#totalprice h4'）.text（'总价：'+totalprice）；

差不多就是这样。
也许我真的不明白。但是当产品或其数量发生变化时，您必须计算价格。我建议，您已经为这两个操作设置了一个事件。然后我会运行一个计算价格的函数

现在这取决于你是否已经有了一个固定的价格，或者还必须将其与数量相乘。循环遍历产品并计算价格

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

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');
}

函数calculatePrice（）{
var数量、价格、总和=0；
//循环通过产品“块”
$（'.articel'）。每个（函数（）{
price=$（this.children（'.price'）.val（）；
数量=$（this.children（'.quantity'）.val（）；
//如果数字为，则将价格添加到总和
如果（！isNaN（价格）和&！isNaN（数量））{
总和+=价格*数量；
}
});
//更新价格
$（“#totalprice'）.html（'总价：'+sum+'因此它添加了一个产品和该产品数量的总价。问题是，当我想再添加一个产品时，购物车中所有产品的总价应该显示在购物车中产品的底部。有没有简单的方法可以做到这一点？（或者不简单…）谢谢，我不知道如何添加新的总数，然后在每次添加新内容时更新它。我相信您会将pdjota的脚本放在它自己的函数中，然后在“添加到购物车”脚本中调用它
function calcTotal (ul) {
  var newTotal = 0;
  ul.find('li').each( function(i,e) {
    var li = $(e);
    newTotal += li.data('quantity') * li.data('price');
  });
}

itemPrice = quantity * price;
var prodDesc = name + " x " + quantity + "= " + itemPrice + "$";//same as it was.
var newLi = $("<li>");
newLi.text(prodDesc).data('quantity', quantity).data('price', price);
ul.append(newLi);
var totalPrice = calcTotal(ul);
$('#totalprice h4').text('Total Price: ' + totalPrice);

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');
}