jQuery如何识别多个number类型input中被修改数值的对应输入框

问题根因 #

• 使用$('.qty').val()取值时，jQuery会返回所有匹配.qty类名的元素中第一个元素的数值，不会匹配你当前正在操作的输入框
• 给外层.quantity绑定click事件，只能覆盖点击调整数值的场景，手动输入修改数值的场景无法触发，也没有做当前输入框的定位逻辑

修正方案 #

直接给所有.qty输入框绑定input事件，通过$(this)定位当前触发事件的输入框，即可准确获取对应数值，同时兼容点击调整、手动输入两种修改场景，修正后的JS代码如下：

$(function(){
  // 绑定input事件到所有数值输入框，覆盖所有数值修改场景
  $('.qty').on('input', function(){
    // $(this)指向当前正在修改的输入框
    let qty = $(this).val();
    console.log('当前修改的输入框值：', qty);
    // 额外新增逻辑：识别当前修改的是第几个输入框
    let inputSerial = $('.qty').index(this) + 1;
    console.log('当前修改的是第'+ inputSerial +'个输入框');
  });
});

如果需要保留绑定事件到外层.quantity的写法，可以改成以下委托绑定形式：

$(function(){
  $('.quantity').on('click input', '.qty', function(){
    let qty = $(this).val();
    console.log(qty);
  });
});

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