多个同名text输入框：仅为修改的输入框触发背景变色效果

你的代码存在两个核心问题，导致无法实现仅当前输入框变色的需求：

• 选择器语法错误：$('[name="stats"]'.id)是无效写法，既没有正确拼接ID选择器，也完全没必要用ID定位
• 没有定位到当前触发事件的元素：每次都选择所有name="stats"的输入框，所以会批量变色

修正后的代码 #

jQuery(document).ready(function($) {
  $('[name="stats"]').on('change', function() {
    // 存储当前触发事件的输入框jQuery对象
    const $target = $(this);
    // 设置绿色背景
    $target.css("background-color", "#adf0c2");
    // 2秒后恢复白色背景
    setTimeout(function() {
      $target.css("background-color", "#ffffff");
    }, 2000);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="stats" id="1a" value="">
<input type="text" name="stats" id="2a" value="">
<input type="text" name="stats" id="3a" value="">

关键说明 #

• 在事件回调函数中，this指向当前触发change事件的DOM元素，用$(this)转换成jQuery对象后，就能精准操作这个输入框
• 提前把$(this)存成变量$target，是为了在setTimeout的回调里能正确访问到目标元素（避免上下文丢失）

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