本文介绍如何通过 jQuery 在按钮点击时自动获取其显示文本（如 Razor 中的 @item.Id），并将其赋值给指定表单字段，避免硬编码，提升代码复用性与可维护性。

本文介绍如何通过 jquery 在按钮点击时自动获取其显示文本（如 razor 中的 `@item.id`），并将其赋值给指定表单字段，避免硬编码，提升代码复用性与可维护性。

在 Web 开发中，常需为列表项（如表格行）绑定编辑按钮，并将当前项唯一标识（如 Id）传入模态框或表单进行后续操作。若为每个按钮单独写死 ID 或内联 onclick 事件，不仅冗余，还违背 DOM 解耦原则。jQuery 提供了简洁可靠的方案：利用事件上下文动态提取按钮内容。

核心思路是：在点击事件处理器中，使用 $(this) 指向被点击的按钮元素，再调用 .text() 方法获取其可见文本内容（即渲染后的 @item.Id 值），最后通过 .val() 将该值写入目标输入框（如 <input id="Id">）。

以下是完整、可直接运行的示例代码：

jQuery 1.12.4

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

下载

<!-- 引入 jQuery（建议置于 </body> 前） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- 编辑按钮（Razor 语法中 @item.Id 会渲染为实际数值，如 123） -->
<button id="buttonEdit" style="color:darkgreen" data-toggle="modal" data-target="#EditRecord">@item.Id</button>

<!-- 接收参数的目标输入框 -->
<input type="text" id="Id" placeholder="ID will be auto-filled here" />

$(document).ready(function() {
  $('#buttonEdit').on('click', function() {
    const clickedId = $(this).text().trim(); // 获取按钮文本并去除首尾空格
    $('#Id').val(clickedId);
  });
});

✅ 关键说明与最佳实践：

• 使用 .on('click', ...) 替代已废弃的 .click() 更符合现代 jQuery 规范；
• .text() 获取的是纯文本内容（不含 HTML 标签），安全可靠；.trim() 防止因模板换行或空格导致值异常；
• 若按钮内含图标（如 <i class="icon-edit"></i> @item.Id），.text() 仍能正确提取数字部分，但建议保持按钮内容简洁；
• 如需支持多个同类按钮（例如每行一个编辑按钮），应改用类选择器 + 数据属性（如 class="btn-edit" 和 data-id="@item.Id"），避免 ID 重复，示例：

  <button class="btn-edit" data-id="@item.Id">Edit</button>

  $('.btn-edit').on('click', function() {
    const id = $(this).data('id'); // 更语义化、更健壮
    $('#Id').val(id);
  });

掌握这一模式，你就能轻松实现“一处编写、多处复用”的参数传递逻辑，显著提升前端交互开发效率与代码质量。