如何使用jQuery从JSON数据中计算购物车商品总价格

修复方案 #

你只需要在现有的showMiniCart函数中补充总金额累加逻辑即可，具体修改如下：

1. 购物车为空时，同步将总价重置为0
2. 购物车有商品时，遍历商品的过程中累加每个商品的小计金额，遍历结束后将最终总价写入类名为fullprice的标签

修改后的完整showMiniCart函数代码：

function showMiniCart() {
    if (!isEmpty(cart)) {
        $('.mini-basket').html('Basket is empty!');
        // 空购物车时总价设为0
        $('.fullprice').text(0);
    }
    else {
        $.getJSON('goods.json', function (data) {
            var geds = data;
            var out="";
            // 初始化总金额变量
            var totalPrice = 0;
            for (var key in cart) {
                // 计算当前商品小计
                let subTotal = Number(cart[key])*Number(geds[key].cost);
                // 累加到总金额
                totalPrice += subTotal;
                out += '<div class="mini-basket_list">'
                out += `<img src="img/${geds[key].img}" alt="Error" class="cart-product__img">`;
                out += `<span class="name-basket">${geds[key].name}</span>`+'<br>';
                out += `  <button data-id="${key}" class="plus-goods btn">+</button>  `;
                out += `<span class="quantityy">${cart[key]}</span>`;
                out += `  <button data-id="${key}" class="minus-goods btn">-</button>  `;
                out += `<p class="cost-basket">Цена: <span class="cost-basket_plus">${subTotal}</span> $</p>`;
                out += `<button data-id="${key}" class="del-goods btn">x</button>  `;
                out += '</div>'
            }
            $('.mini-basket').html(out);
            // 写入总金额到指定标签
            $('.fullprice').text(totalPrice);
            $('.del-goods').on('click', delGoods);
            $('.plus-goods').on('click', plusGoods);
            $('.minus-goods').on('click', minusGoods);
        });
    }
}

修改完成后，每次购物车商品变动（新增、调整数量、删除）触发showMiniCart刷新时，都会自动重新计算总金额并更新到对应位置。

内容的提问来源于stack exchange，提问作者DeLuxer