本文介绍如何通过 jQuery 在按钮点击时自动读取其显示文本（如 @item.Id），并将其赋值给指定表单元素（如 #Id 输入框），避免硬编码，提升代码复用性与可维护性。
本文介绍如何通过 jquery 在按钮点击时自动读取其显示文本（如 `@item.id`），并将其赋值给指定表单元素（如 `#id` 输入框），避免硬编码，提升代码复用性与可维护性。
在实际开发中（尤其在 ASP.NET Core 或 Razor 页面中），常需为列表项渲染多个编辑按钮，每个按钮需携带对应数据的唯一标识（如 @item.Id）。若为每个按钮单独绑定 ID 并编写独立事件处理函数，将导致冗余代码和维护困难。更优雅的方式是：利用事件委托 + $(this) 上下文 + .text() 方法，动态提取当前被点击按钮的可见文本内容，并注入目标表单控件。
以下为完整、可直接运行的实现方案：
<!-- 引入 jQuery（建议置于 </body> 前或使用 CDN） --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- 编辑按钮（Razor 语法示例，服务端渲染 @item.Id） --> <button id="buttonEdit" style="color:darkgreen" data-toggle="modal" data-target="#EditRecord">@item.Id</button> <!-- 目标输入框（用于接收传递的 ID 值） --> <input type="text" id="Id" placeholder="ID will be auto-filled on click" />
$(document).ready(function () {
$('#buttonEdit').click(function () {
// ✅ 使用 $(this) 获取当前被点击的按钮 DOM 元素
// ✅ .text() 安全获取纯文本内容（自动过滤 HTML 标签，防 XSS 风险）
const parameter = $(this).text().trim(); // .trim() 去除首尾空格，增强健壮性
// ✅ 将提取的 ID 赋值给 #Id 输入框
$('#Id').val(parameter);
// ? 可选：触发后续逻辑，例如打开模态框（确保 Bootstrap JS 已加载）
// $('#EditRecord').modal('show');
});
});✅ 关键要点说明：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
- 不要使用 $('#buttonEdit').text()：该写法会匹配所有 ID 为 buttonEdit 的元素（尽管通常唯一），但语义上不表达“当前点击对象”；而 $(this) 明确指向事件触发源，逻辑更清晰、更安全。
- .text() vs .html()：务必使用 .text() 提取纯文本——若按钮内含 HTML（如 <span>@item.Id</span>），.html() 会返回标签字符串，而 .text() 只返回渲染后的文本内容，且天然规避 XSS 风险。
- ID 唯一性约束：HTML 规范要求 id 属性全局唯一。若页面存在多个编辑按钮（如循环生成），应改用 class="btn-edit" + data-id="@item.Id" 属性方式，并配合事件委托：
// ✨ 推荐进阶写法（支持多按钮场景）
$(document).on('click', '.btn-edit', function() {
const id = $(this).data('id'); // 从 data-id 属性读取（更语义化、更可靠）
$('#Id').val(id);
});⚠️ 注意：若使用 data-id 方式，请确保按钮写法为 <button class="btn-edit" data-id="@item.Id" ...>。相比依赖可见文本，data-* 属性更可控、不易受样式或空格干扰，是生产环境首选方案。
总结：动态参数传递的核心在于解耦数据来源与交互逻辑。通过 $(this).text() 或 $(this).data('xxx')，配合语义化 HTML 属性，即可实现简洁、健壮、可扩展的前端数据流转。
