增减按钮无法更新商品小计与总价问题求助

我希望实现点击加减按钮时更新商品的小计与总价，但价格并未发生变化。尝试按商品数量累加价格仍陷入困境，以下是我的代码：

商品行HTML #

<td>
    {{-- <input type="number" value="2" class="form-control input-kuantitas"> --}}
    <div class="wrapper">
        <span class="minus">-</span>
        <span class="num" id="quantity_{{ $pesanan->id }}">1</span>
        <span class="plus">+</span>
    </div>
</td>
    
<td id="price_{{ $pesanan->id }}">{{ $pesanan->harga }}</td>

总价区域HTML #

<div class="row">
    <div class="col-md-4 ms-auto">
        <div class="table-responsive">
            <table class="table">
                <tr>
                    <th>Total</th>
                    <td id="total">Rp. {{ $harga }}</td>
                </tr>

原始JS代码 #

$('.plus').click(function (e) { 
    const elem=$(this).prev();
    let qty = parseInt(elem.html())+1;
    elem.html(qty);
});
$('.minus').click(function (e) { 
    const elem=$(this).next();
    let qty = parseInt(elem.html());
    if(qty>1){
        qty--;
    }
    elem.html(qty);
});

解决方案 #

原始代码仅更新了数量显示，未关联计算单价、小计与总价。以下是修改后的完整实现：

1. 更新商品行HTML（新增小计列与关联标识） #

<tr data-id="{{ $pesanan->id }}">
    <td>
        <div class="wrapper">
            <span class="minus">-</span>
            <span class="num" id="quantity_{{ $pesanan->id }}">1</span>
            <span class="plus">+</span>
        </div>
    </td>
    <td id="price_{{ $pesanan->id }}">{{ $pesanan->harga }}</td>
    <!-- 新增小计列，用于展示单商品总价 -->
    <td id="subtotal_{{ $pesanan->id }}">{{ $pesanan->harga }}</td>
</tr>

2. 修改JS代码（添加计算逻辑） #

// 封装总价计算函数，遍历所有商品小计累加
function calculateTotal() {
    let total = 0;
    $('[id^="subtotal_"]').each(function() {
        total += parseInt($(this).text());
    });
    $('#total').text(`Rp. ${total}`);
}

// 加号按钮点击事件
$('.plus').click(function() {
    const quantityElem = $(this).prev();
    let qty = parseInt(quantityElem.text()) + 1;
    quantityElem.text(qty);
    
    // 获取当前商品ID，关联单价与小计
    const pesananId = $(this).closest('tr').data('id');
    const harga = parseInt($(`#price_${pesananId}`).text());
    const subtotal = harga * qty;
    
    // 更新单商品小计
    $(`#subtotal_${pesananId}`).text(subtotal);
    // 重新计算全局总价
    calculateTotal();
});

// 减号按钮点击事件
$('.minus').click(function() {
    const quantityElem = $(this).next();
    let qty = parseInt(quantityElem.text());
    
    if(qty > 1) {
        qty--;
        quantityElem.text(qty);
        
        // 获取当前商品ID，关联单价与小计
        const pesananId = $(this).closest('tr').data('id');
        const harga = parseInt($(`#price_${pesananId}`).text());
        const subtotal = harga * qty;
        
        // 更新单商品小计
        $(`#subtotal_${pesananId}`).text(subtotal);
        // 重新计算全局总价
        calculateTotal();
    }
});

核心逻辑说明 #

• 通过data-id将加减按钮与对应商品的单价、小计单元格关联
• 每次数量变化时，计算当前商品的「单价×数量」得到小计并更新
• 调用calculateTotal函数遍历所有商品小计，累加后更新全局总价显示

内容的提问来源于stack exchange，提问作者TE_ Richo Victor Matheus Hardi