手动修改输入框数值时，如何发送对应的del或add类型请求？

这个场景太常见了——靠按钮点击判断add/del确实没法覆盖手动改输入框的情况，核心思路是记录输入框的原始值，通过对比新旧值来判断操作类型。下面给你具体的实现方案：

步骤1：初始化输入框的原始值 #

页面加载时，给每个数量输入框绑定初始值，用data-*属性存起来，方便后续对比：

// 假设你的数量输入框有统一类名 .quantity-input
$('.quantity-input').each(function() {
  $(this).data('original-value', $(this).val());
});

步骤2：监听输入框的变化事件 #

用change事件（失去焦点且值变化时触发，避免实时请求太频繁）捕获手动修改操作，对比新旧值判断请求类型：

function handleQuantityInputChange(input) {
  const $input = $(input);
  // 找到对应的商品ID（假设按钮和输入框都在带data-id的容器里）
  const id = $input.closest('[data-id]').attr('data-id');
  // 转成整数避免字符串比较出错
  const originalVal = parseInt($input.data('original-value'), 10);
  const newVal = parseInt($input.val(), 10);
  
  // 值没变化直接返回，不用发请求
  if (newVal === originalVal) return;

  let type = '';
  // 计算变化的数量（取绝对值，和按钮逻辑保持一致，传变化量）
  const quant = Math.abs(newVal - originalVal);

  if (newVal > originalVal) {
    type = 'add';
  } else {
    type = 'del';
  }

  // 复用你原来的AJAX逻辑，修正detail的判断选择器
  const detail = $input.closest('.card').length ? 'Y' : '';
  
  $.ajax({
    url: '你的接口地址',
    method: 'POST',
    data: {
      id: id,
      type: type,
      quant: quant,
      detail: detail
    },
    success: function(response) {
      // 请求成功后更新原始值，方便下次判断
      $input.data('original-value', newVal);
    },
    error: function() {
      // 出错时还原输入框值，避免数据不一致
      $input.val(originalVal);
      alert('更新失败，请重试');
    }
  });
}

// 绑定事件
$('.quantity-input').on('change', function() {
  handleQuantityInputChange(this);
});

步骤3：修正原有按钮逻辑的小问题 #

你原来的代码里有个选择器错误：$('div').is('card')应该改成$update.closest('.card').length（判断是否在带.card类的容器里），同时点击按钮后要更新输入框的原始值，保证下次手动修改时对比的是最新值：

function updateQuantityCatalog(update) {
    const $update = $(update);
    const id = $update.attr('data-id');
    let detail = '';
    let quant = 1;
    let type = '';

    // 修正选择器，判断是否在.card容器内
    const $card = $update.closest('.card');
    if ($card.length) {
        detail = 'Y';
        const $input = $update.parent().find('input');
        quant = parseInt($input.val(), 10);
        // 点击按钮后更新输入框的原始值
        $input.data('original-value', quant);
    } else {
        detail = '';
        quant = 1;
    }

    type = $update.hasClass('minus') ? 'del' : 'add';

    $.ajax({ 
      // 你的原有AJAX配置
      // 成功后如果是card内的情况，也记得更新输入框的原始值哦
    });
}

额外注意点 #

• 一定要把数值转成整数再比较，不然字符串"10"会被认为比"2"小，导致判断错误。
• 如果需要实时监听输入（比如用户输入过程中就触发），可以把change换成input事件，但要加防抖逻辑，避免频繁发请求。
• AJAX失败时还原输入框值，能避免前端显示和后端数据不一致的问题。

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