AJAX+PHP购物车添加第二个商品时数量更新失效问题

我通过AJAX从商品页面将商品添加至购物车，同时传递数量字段。第一个商品可正常按指定数量添加，但添加第二个商品时，系统始终将第一个商品的数量值传入数据库。以下是我的代码：

原HTML代码 #

<div class="pro-quantity">
 <div class="quantity">
  <button class="decrement-btn">-</button>
  <input type="text" id="sqty" maxlength="2" max="10" value="1" class="qty-input">
  <button class="increment-btn">+</button>
 </div>
</div>

<div class="pro-id-2">
<div class="tw-flex tw-justify-between tw-items-center">
                                                        
<button class="pro-id-link" value="<? echo $id; ?>" id="add-deposit">Add to Cart</button>
<input type="hidden" name="" id="cus_id" value="<? echo $_SESSION['u_id']; ?>">
</div>
</div>

原数量增减JS代码 #

$(document).ready(function () {

  $('.increment-btn').click(function (e) {
    e.preventDefault();
    var incre_value = $(this).parents('.quantity').find('.qty-input').val();
    var value = parseInt(incre_value, 10);
    value = isNaN(value) ? 0 : value;
    if (value < 10) {
      value++;
      $(this).parents('.quantity').find('.qty-input').val(value);
    }

  });

  $('.decrement-btn').click(function (e) {
    e.preventDefault();
    var decre_value = $(this).parents('.quantity').find('.qty-input').val();
    var value = parseInt(decre_value, 10);
    value = isNaN(value) ? 0 : value;
    if (value > 1) {
      value--;
      $(this).parents('.quantity').find('.qty-input').val(value);
    }
  });

});

原AJAX请求JS代码 #

$(document).ready(function () {

  $(document).on("click", "#add-deposit", function (e) {
    e.preventDefault();
    var element = $(this);
    var id = $(this).val();
    var cus_id = $('#cus_id').val();
    var sqty = $('#sqty').val();

    $.ajax({
      url: "add_deposit_script.php",
      type: "POST",
      data: {
        id: id,
        cus_id: cus_id,
        sqty: sqty
      },
      success: function (data) {
        if (data === 'success') {
          Swal.fire({
            icon: 'success',
            title: 'Success.',
            text: 'Success! This product has been added into Deposit.'
          })
        }
        if (data === 'error') {
          Swal.fire({
            icon: 'error',
            title: 'Error.',
            text: 'Error! This Product is already in your deposit.'
          })
        }
        element.prop('disabled', true);
        element.html('Added');
        getcartnumber();
      }
    });
  });
});

问题原因 #

页面中每个商品的数量输入框都使用了重复的ID sqty，添加按钮也使用了重复的ID add-deposit。HTML规范中ID是唯一标识，当通过$('#sqty').val()获取值时，只会返回第一个匹配该ID的元素数值，导致第二个商品的AJAX请求始终取到第一个商品的数量。

解决方案 #

1. 修改HTML结构：去除重复ID，通过父容器关联商品控件 #

给每个商品套一个统一的父容器，移除重复ID，保留类标识：

<!-- 每个商品的独立容器 -->
<div class="product-item">
  <div class="pro-quantity">
    <div class="quantity">
      <button class="decrement-btn">-</button>
      <!-- 移除重复id="sqty"，保留class="qty-input" -->
      <input type="text" maxlength="2" max="10" value="1" class="qty-input">
      <button class="increment-btn">+</button>
    </div>
  </div>

  <div class="pro-id-2">
    <div class="tw-flex tw-justify-between tw-items-center">
      <!-- 移除重复id="add-deposit"，新增class="add-deposit" -->
      <button class="pro-id-link add-deposit" value="<? echo $id; ?>">Add to Cart</button>
      <input type="hidden" name="" id="cus_id" value="<? echo $_SESSION['u_id']; ?>">
    </div>
  </div>
</div>

2. 修改AJAX请求代码：通过父容器定位对应商品的数量 #

点击添加按钮时，先找到当前商品的父容器，再在容器内查找数量输入框：

$(document).ready(function () {

  $(document).on("click", ".add-deposit", function (e) {
    e.preventDefault();
    var element = $(this);
    var id = $(this).val();
    var cus_id = $('#cus_id').val();
    // 通过父容器定位当前商品的数量输入框
    var sqty = element.closest('.product-item').find('.qty-input').val();

    $.ajax({
      url: "add_deposit_script.php",
      type: "POST",
      data: {
        id: id,
        cus_id: cus_id,
        sqty: sqty
      },
      success: function (data) {
        if (data === 'success') {
          Swal.fire({
            icon: 'success',
            title: 'Success.',
            text: 'Success! This product has been added into Deposit.'
          })
        }
        if (data === 'error') {
          Swal.fire({
            icon: 'error',
            title: 'Error.',
            text: 'Error! This Product is already in your deposit.'
          })
        }
        element.prop('disabled', true);
        element.html('Added');
        getcartnumber();
      }
    });
  });
});

3. 数量增减逻辑无需修改 #

原有的数量增减代码已经通过$(this).parents('.quantity').find('.qty-input')定位当前控件的输入框，逻辑正确，无需改动。

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