如何为单个触发变更的输入框添加独立的背景高亮效果-html教程-PHP中文网

如何为单个触发变更的输入框添加独立的背景高亮效果

本文讲解如何使用 jQuery 为发生 change 事件的唯一输入框单独添加 2 秒绿色背景高亮，避免影响其他同名输入框，并指出原始代码中常见的选择器与 this 误用问题。

本文讲解如何使用 jquery 为发生 `change` 事件的**唯一输入框**单独添加 2 秒绿色背景高亮，避免影响其他同名输入框，并指出原始代码中常见的选择器与 `this` 误用问题。

在实际开发中，我们常需对用户操作的特定表单控件提供即时视觉反馈（如 AJAX 提交成功后高亮该字段）。但若多个共享相同 name 属性（例如 name="stats"），直接使用 $('[name="stats"]') 会选中全部元素，导致“一改全亮”的错误行为。

关键在于：必须基于事件源（即当前触发 change 的 DOM 元素）进行操作，而非重新查询所有匹配元素。 正确做法是使用事件回调中的 this（原生 DOM 元素）或 $(this)（jQuery 对象）来精准定位目标：

jQuery(document).ready(function($) {
  $('input[name="stats"]').on('change', function() {
    const $input = $(this); // 将当前输入框封装为 jQuery 对象
    $input.css('background-color', '#adf0c2');

    setTimeout(() => {
      $input.css('background-color', '#ffffff');
    }, 2000);
  });
});

⚠️ 原始代码中的严重错误：

$('[name="stats"]'.id).css(...) // ❌ 语法错误：字符串拼接 `.id` 无意义

此处 '...'.id 是非法 JS 表达式，且混淆了属性访问与 jQuery 选择器逻辑。正确方式永远是先获取事件目标，再对其操作。

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

✅ 进阶建议：语义化与可维护性

避免 name 冗余冲突：HTML 表单中，多个 name="stats" 在提交时仅保留最后一个值（除非使用 name="stats[]" 数组语法）。若仅用于前端标识，推荐改用 class="stats" 或 data-field="stats"，更清晰、更易扩展。

推荐结构优化示例：

<input type="text" name="stats[1a]" class="stats" data-id="1a" value=""><input type="text" name="stats[2a]" class="stats" data-id="2a" value=""><input type="text" name="stats[3a]" class="stats" data-id="3a" value="">

此时可通过 $(this).data('id') 获取业务 ID，便于后续与后端字段映射。

? 总结：

this 指向当前触发事件的 DOM 元素，是实现“单元素响应”的核心；
避免在事件处理中重复使用全局选择器（如 $('[name=...]')），既低效又易出错；
结合 CSS 过渡（transition: background-color 0.3s）可让颜色变化更平滑，但需注意 setTimeout 仍需保留以控制持续时间。