如何用jQuery foreach实现购物车商品数量独立增减功能

核心问题分析 #

你遇到的问题根源有三点：

• 所有商品的数量输入框共用同一个name="quantity"，jQuery通过name全局选择时会修改所有匹配的输入框，导致同步变化。
• PHP用单一变量$product_quantity存储数量，无法区分不同商品的数值。
• jQuery代码中.qtyminus选择器遗漏开头的点（.），事件绑定失效；同时提交按钮会触发页面刷新，导致数量重置。

修改后的完整代码 #

PHP与HTML部分

<?php
// 用数组存储不同商品的数量，默认每个商品数量为1
$product_quantities = isset($_POST['quantity']) ? $_POST['quantity'] : [];
?>

<!-- 商品1的数量控制表单 -->
<form class="cart-items-number d-flex ml-auto" method='POST' action=''>
    <button type="button" class="qtyminus btn btn-success btn-sm">-</button>
    <input type='text' name='quantity[1]' value='<?php echo isset($product_quantities[1]) ? $product_quantities[1] : 1; ?>' class='qty form-control' />
    <button type="button" class="qtyplus btn btn-success btn-sm">+</button>
</form>

<!-- 商品2的数量控制表单 -->
<form class="cart-items-number d-flex ml-auto" method='POST' action=''>
    <button type="button" class="qtyminus btn btn-success btn-sm">-</button>
    <input type='text' name='quantity[2]' value='<?php echo isset($product_quantities[2]) ? $product_quantities[2] : 1; ?>' class='qty form-control' />
    <button type="button" class="qtyplus btn btn-success btn-sm">+</button>
</form>

jQuery部分

<script src="jquery/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
    // 增加数量逻辑
    $('.qtyplus').click(function() {
        // 精准定位当前按钮所在表单内的数量输入框
        var $input = $(this).closest('form').find('.qty');
        var currentVal = parseInt($input.val());
        $input.val(!isNaN(currentVal) ? currentVal + 1 : 1);
    });

    // 减少数量逻辑
    $('.qtyminus').click(function() {
        var $input = $(this).closest('form').find('.qty');
        var currentVal = parseInt($input.val());
        $input.val(!isNaN(currentVal) && currentVal > 1 ? currentVal - 1 : 1);
    });
});
</script>

关键修改说明 #

1. 输入框命名区分：将数量输入框的name改为数组形式quantity[商品ID]（如quantity[1]），PHP用数组接收不同商品的数量，避免变量冲突。
2. 按钮类型调整：把<input type="submit">改成<button type="button">，阻止默认表单提交行为，避免页面刷新导致数量重置。
3. 精准DOM定位：用$(this).closest('form').find('.qty')替代全局name选择器，确保只修改当前按钮所在表单的数量输入框。
4. 修复选择器错误：修正$("qtyminus")为$('.qtyminus')，保证事件能正确绑定到减少按钮。
5. 数组存储数量：PHP用$product_quantities数组保存所有商品的数量，提交表单后可正确保留每个商品的数值。

如果需要循环生成多个商品表单，可使用PHP循环简化代码：

<?php
$products = [1, 2, 3]; // 商品ID列表
$product_quantities = isset($_POST['quantity']) ? $_POST['quantity'] : [];
foreach ($products as $product_id) {
    $qty = isset($product_quantities[$product_id]) ? $product_quantities[$product_id] : 1;
?>
<form class="cart-items-number d-flex ml-auto" method='POST' action=''>
    <button type="button" class="qtyminus btn btn-success btn-sm">-</button>
    <input type='text' name='quantity[<?php echo $product_id; ?>]' value='<?php echo $qty; ?>' class='qty form-control' />
    <button type="button" class="qtyplus btn btn-success btn-sm">+</button>
</form>
<?php } ?>

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