如何在jQuery中检测数字输入框的真实数值变化？

问题分析 #

你的加减按钮逻辑里，不管数值是否真的改变，都会调用.change()触发事件，导致即使已经到最大/最小值，点击按钮还是会触发change处理函数，造成不必要的逻辑执行。而且你无法修改这部分按钮代码，所以只能在自己的change事件处理里做拦截。

解决方案 #

给每个数量输入框记录上一次的有效数值，每次触发change时先对比当前值和旧值，只有当两者确实不同时，才执行后续的确认、更新购物车等逻辑。

修改后的完整代码 #

var countdown;
// 初始化时给所有数量输入框绑定初始旧值
jQuery(".qty").each(function() {
  jQuery(this).data("prev-value", jQuery(this).val());
});

jQuery(document).on('change', ".qty", function() {
  var $input = jQuery(this);
  var currentVal = $input.val();
  var prevVal = $input.data("prev-value");
  var maxQty = $input.attr("max");

  // 数值没变化直接终止，不执行后续逻辑
  if (currentVal === prevVal) {
    return;
  }

  // 更新记录的旧值
  $input.data("prev-value", currentVal);

  clearTimeout(countdown);
  if (currentVal == 0) {
    if (confirm("确定要把数量设为0吗？")) {
      countdown = setTimeout(wauc_update_cart, 100);
    } else {
      // 用户取消，恢复原来的数值
      $input.val(prevVal);
      $input.data("prev-value", prevVal);
    }
  } else if (currentVal == maxQty) {
    console.log("已经是最大数量了");
  } else {
    countdown = setTimeout(wauc_update_cart, 1000);
  }
});

function wauc_update_cart() {
  jQuery("[name='update_cart']").trigger("click");
  console.log("执行购物车更新");
}

// 以下代码无法修改，保持原样
jQuery('.plus.button').on('click', function() {
  var count = parseInt(jQuery('.qty').val());
  var maxquantity = jQuery('.qty').attr("max");
  var ujszam = 0;

  if (count == maxquantity) {
    var ujszam = maxquantity;
  } else {
    var ujszam = count + 1;
  }

  jQuery('.qty').val(ujszam).change();
});

jQuery('.minus.button').on('click', function() {
  var count = parseInt(jQuery('.qty').val());
  var ujszam = 0;

  if (count == 0) {
    var ujszam = 0;
  } else {
    var ujszam = count - 1;
  }

  jQuery('.qty').val(ujszam).change();
});

说明 #

1. 用jQuery.data()存储上一次的数值，不会污染DOM元素的属性，操作更安全
2. 当用户取消设为0的操作时，自动恢复之前的数值，提升用户体验
3. 核心的数值对比逻辑确保只有真正的数值变更才会触发后续流程，避免无效的事件执行

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