本文介绍如何利用 jquery 的 click 事件和 text() 方法，实现点击一个按钮后动态更改另一个按钮的显示文本，适用于基础交互式网页开发。

要实现“点击按钮 A，改变按钮 B 的文字”，核心在于：为触发按钮（如“Change the Text…”）绑定点击事件，并在事件处理函数中定位目标按钮（如 id="button_1_id"），再调用 .text() 方法更新其文本内容。

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>按钮文本动态修改</title>
  <!-- 引入 jQuery CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

  <button id="button_1_id">Cat</button>

  <br><br><br><br>

  <button id="chnage_text_button">Change the Text of Above Button</button>

  <script>
    // 为修改按钮绑定点击事件
    $('#chnage_text_button').click(function () {
      $('#button_1_id').text('Dog'); // 将目标按钮文本设为 "Dog"
    });
  </script>

</body>
</html>

✅ 关键要点说明：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

• $('#chnage_text_button') 使用 ID 选择器精准获取触发按钮；
• .click(function () { ... }) 为其注册点击响应逻辑；
• $('#button_1_id').text('Dog') 选中目标按钮并替换其纯文本内容（不解析 HTML）；若需插入含标签的富文本，请改用 .html('Dog <small>(updated)</small>')。

⚠️ 注意事项：

• 确保 jQuery 库在 <script> 执行前已加载（推荐放在 <head> 中或 <body> 底部但位于业务脚本之前）；
• 检查 ID 拼写是否一致（原文中 chnage_text_button 存在拼写错误，应为 change_text_button，但只要前后统一即可正常工作）；
• 若需切换回原文字（如 Cat ↔ Dog），可加入状态判断逻辑，例如使用 .data() 或变量记录当前状态。

该方法简洁高效，是前端交互开发中最基础也最实用的 DOM 操作之一。