如何用加减按钮替换jQuery采购单中的下拉选择框以优化体验

一、替换HTML结构 #

将原有的<select>组件替换为加减按钮+只读输入框的组合，每个商品项的数量控制组与商品ID绑定，确保300个商品独立控制：

<div class="col-md-12 quantity-control d-flex align-items-center gap-2">
  <button class="btn btn-sm btn-outline-secondary qty-minus" data-id="2001">-</button>
  <input type="number" class="form-control qty-input text-center" id="qty-2001" value="1" min="1" max="9" readonly style="width: 60px;">
  <button class="btn btn-sm btn-outline-secondary qty-plus" data-id="2001">+</button>
</div>
<a style="cursor: pointer; margin-bottom: 5px;width: 90%;display: block;margin-left: auto;margin-right: auto;" 
   data-nom="2001" data-prix="1.10" data-qte="1" data-checkbox="2001" 
   data-url="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" 
   class="btn btn-primary ajouter-panier b-items__item__add-to-cart" 
   onclick="ouvreMaJolieAlert(event);">
  ajouter au panier
</a>

二、jQuery逻辑实现 #

编写事件监听逻辑，实现数量增减、同步更新原有数据属性，并兼容原有的changeQte实时同步逻辑：

$(document).ready(function() {
  // 减按钮点击事件
  $('.qty-minus').on('click', function() {
    const itemId = $(this).data('id');
    const qtyInput = $('#qty-' + itemId);
    let currentQty = parseInt(qtyInput.val());
    
    if (currentQty > 1) {
      currentQty--;
      qtyInput.val(currentQty);
      syncQtyData(itemId, currentQty);
    }
  });

  // 加按钮点击事件
  $('.qty-plus').on('click', function() {
    const itemId = $(this).data('id');
    const qtyInput = $('#qty-' + itemId);
    let currentQty = parseInt(qtyInput.val());
    
    if (currentQty < 9) { // 与原下拉框最大数量保持一致
      currentQty++;
      qtyInput.val(currentQty);
      syncQtyData(itemId, currentQty);
    }
  });

  // 同步数量数据到原有逻辑
  function syncQtyData(itemId, qty) {
    // 更新添加按钮的data-qte属性，确保点击时传递最新数量
    $('.ajouter-panier[data-nom="' + itemId + '"]').attr('data-qte', qty).data('qte', qty);
    
    // 触发原有changeQte函数，保持实时数据同步
    changeQte({ id: itemId, value: qty });
  }
});

三、关键注意事项 #

• 批量适配300个商品：只需将每个商品的data-id、输入框ID（qty-xxx）与商品ID（如2001）对应即可，无需重复编写逻辑
• 数量范围限制：保持1-9的数量区间，与原下拉框逻辑一致，避免超出业务规则
• 样式兼容：使用Bootstrap的d-flex、align-items-center类让控制组横向居中排列，可根据需求调整样式
• 原有逻辑兼容：通过syncQtyData函数同步数量到data-qte属性并触发changeQte，确保原有数据流转不受影响

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