jQuery购物车问题求助：第二个商品数量增减按钮无响应，小计无法更新

嘿，我一眼就发现问题啦——你在HTML代码里重复使用了相同的id属性（比如#add、#subtract、#qty、#price、#subtotal），而根据DOM规则，id是页面内唯一的标识！jQuery用$('#add')这种id选择器的时候，只会匹配到页面中第一个拥有该id的元素，这就是为什么第二个商品的加减按钮完全没反应的原因。

另外我还发现你的减法逻辑有个小bug：当点击减号时，小计计算用了price*(current + 1)，这明显不对，应该是price*(current - 1)。

下面是修复后的完整代码：

修改后的HTML代码 #

<tr class="cart">
    <td class="pt-3">
        <img class="img-fluid rounded-pill float-left col-md-3 " src="{{asset('front/')}}/assets/img/1.png" alt="">
        <div class="title pb-2">Margarhitta</div>
        <div class="description">Lorem ipsum sajdhasdhashd sajdhasdhashd sajdhasdhashd</div>
    </td>
    <td class="text-center">
        <span class="price"><strong>13.99</strong></span>
    </td>
    <td class="text-center">
        <input class="subtract text-right" style="width:20px;" type="button" name="subtract" value="-" ></input>
        <input type="text" name="qty" value="0" class="qty" disabled></input>
        <input class="add text-left" style="width: 20px;" type="button" name="add" value="+"></input>
    </td>
    <td class="text-center">
        <input type="text" name="subtotal" value="0" class="subtotal" disabled></input>
    </td>
    <td>
        <a href="javascript:void(0)" class="remove" ><i class="icofont-trash"></i></a>
    </td>
</tr>
<tr class="cart">
    <td class="pt-3">
        <img class="img-fluid rounded-pill float-left col-md-3 " src="{{asset('front/')}}/assets/img/1.png" alt="">
        <div class="title pb-2">Margarhitta</div>
        <div class="description">Lorem ipsum sajdhasdhashd sajdhasdhashd sajdhasdhashd</div>
    </td>
    <td class="text-center">
        <span class="price"><strong>13.99</strong></span>
    </td>
    <td class="text-center">
        <input class="subtract text-right" style="width:20px;" type="button" name="subtract" value="-" ></input>
        <input type="text" name="qty" value="0" class="qty" disabled></input>
        <input class="add text-left" style="width: 20px;" type="button" name="add" value="+"></input>
    </td>
    <td class="text-center">
        <input type="text" name="subtotal" value="0" class="subtotal" disabled></input>
    </td>
    <td>
        <a href="javascript:void(0)" class="remove" ><i class="icofont-trash"></i></a>
    </td>
</tr>

修改后的jQuery代码 #

$(function(){
    $('.portfolio-item').on('click', '.size-click', function(){
        var id = this.dataset.productId, pitem = $(this).closest('.portfolio-item');
        $.ajax({
            type: 'GET',
            url: ('/getData'),
            data: { id: id },
            success: function (data) {
                console.log(data);
                var p = $('p', pitem)[1];
                p.dataset.productId = data.id;
                p.textContent = data.priceS;
            }
        })
    });
    $('#dataTablee').DataTable( {"paging": false, "searching": false });
    $('.portfolio-item').on('click', '.size-clickk', function(){
        var id = this.dataset.productId, pitem = $(this).closest('.portfolio-item');
        $.ajax({
            type: 'GET',
            url: ('/getData'),
            data: { id: id },
            success: function (data) {
                console.log(data);
                var p = $('p', pitem)[1];
                p.dataset.productId = data.id;
                p.textContent = data.price;
            }
        })
    })
    // Cart Item Remove
    var removeButton = $('.remove')
    removeButton.on('click', function(){
        $(this).closest('tr').remove();
    })
    // Add Item to cart
    var cartAddButton = $('.add-to-cart')
    cartAddButton.on('click', function(){
    });
    ///// Cart Update Settings - 使用事件委托绑定，支持多行和动态元素
    $('.cart').on('click', '.add', function() {
        addQuantity(this);
    });
    $('.cart').on('click', '.subtract', function() {
        subQuantity(this);
    });
    function addQuantity(addButton){
        var cartRow = $(addButton).closest('tr');
        // 用class选择器在当前行内查找元素
        var price = parseFloat($('.price strong', cartRow).text());
        var $quantity = $('.qty',cartRow);
        var current = parseInt($quantity.val());
        var subtotal = $('.subtotal', cartRow);
        $quantity.val(current + 1)
        subtotal.val((price*(current + 1)).toFixed(2)) // 保留两位小数更规范
    }
    function subQuantity(subButton){
        var cartRow = $(subButton).closest('tr');
        var price = parseFloat($('.price strong', cartRow).text());
        var $quantity = $('.qty',cartRow);
        var current = parseInt($quantity.val());
        var subtotal = $('.subtotal', cartRow);
        if (current > 0){
            $quantity.val(current - 1)
            subtotal.val((price*(current - 1)).toFixed(2)) // 修复减法计算错误
        }else{
            subtotal.val(0);
        }
    }
});

关键修复点说明 #

• 去掉重复id，改用class：把所有重复的id属性删除，用class来标记同类元素，比如#add→.add、#subtract→.subtract等，确保每个元素的标识符合DOM规范。
• 事件委托绑定：用$('.cart').on('click', '.add', ...)代替直接绑定id，这样不管有多少行商品，动态新增的行也能触发事件。
• 修复计算逻辑：减法时小计计算改为price*(current - 1)，同时用toFixed(2)保留两位小数，避免出现多位小数的奇怪情况。
• 精准选择元素：在当前商品行内查找对应元素，确保操作的是当前行的数量和价格，不会影响其他行。

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