购物车商品数量修改异常：多商品时仅修改首个输入框

数据老陈

2026-8-23

购物车商品数量修改组件修复方案

问题根源

document.querySelector("input") 始终匹配DOM中第一个input元素，多商品场景下必然只修改第一个输入框。
input['value'] = count 中的input是parseInt()转换后的数值类型，不是DOM元素，赋值操作无效。
parent.closest("input") 用法错误：closest()是向上查找父级元素，而输入框是当前容器的子元素，所以无法定位到目标input。

修复后的JS代码（jQuery版本）

$('.minus').click(function () {
    // 直接定位当前商品的数量容器，比多次parent()更可靠
    const $amountContainer = $(this).closest('.amount');
    const $input = $amountContainer.find(".amount-input");
    let count = parseInt($input.val()) - 1;
    // 确保数量不低于最小值1
    count = Math.max(count, 1);
    // 用jQuery的val()方法修改输入框值
    $input.val(count);
});

$('.plus').click(function () {
    const $amountContainer = $(this).closest('.amount');
    const $input = $amountContainer.find(".amount-input");
    const count = parseInt($input.val()) + 1;
    $input.val(count);
});

可选：原生JS混合写法

如果想减少jQuery依赖，也可以这样写：

$('.minus').click(function () {
    const amountContainer = this.closest('.amount');
    const input = amountContainer.querySelector('.amount-input');
    let count = parseInt(input.value) - 1;
    count = Math.max(count, 1);
    input.value = count;
});

$('.plus').click(function () {
    const amountContainer = this.closest('.amount');
    const input = amountContainer.querySelector('.amount-input');
    const count = parseInt(input.value) + 1;
    input.value = count;
});