jQuery获取按钮文本的几种方法

本文深入讲解了如何利用 jQuery 在按钮点击时动态获取其显示文本（如 Razor 视图中渲染的 `@item.Id`），并自动填充至表单字段，彻底摆脱硬编码困扰；通过 `$(this).text().trim()` 精准提取内容、结合事件委托与数据属性（`data-id`）的最佳实践，既保障了安全性与健壮性，又显著提升了代码复用性、可维护性及开发效率，特别适合处理表格行编辑、模态框参数传递等高频场景。

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

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

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

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

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

<!-- 引入 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>

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

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

✅ 关键说明与最佳实践：

• 使用 .on('click', ...) 替代已废弃的 .click() 更符合现代 jQuery 规范；
• .text() 获取的是纯文本内容（不含 HTML 标签），安全可靠；.trim() 防止因模板换行或空格导致值异常；
• 若按钮内含图标（如 @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);
  });

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

理论要掌握，实操不能落！以上关于《jQuery获取按钮文本的几种方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！