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

在网页开发中，常需通过用户交互（如点击）来动态更新页面元素内容。一个典型需求是：点击“更改文本”按钮，将另一个按钮上的文字从 “Cat” 变为 “Dog”。这可通过 jQuery 轻松实现——核心在于绑定点击事件，并操作目标元素的文本内容。

Gradle 9.8.0

下载

✅ 实现步骤

1. 引入 jQuery 库（推荐使用 CDN）
   确保 <head> 或 <body> 底部加载 jQuery，否则 $ 函数不可用：

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. 编写 HTML 结构
   定义两个按钮，分别设置唯一 id 便于精准选择：

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

3. 添加交互逻辑（JavaScript/jQuery）
   在 DOM 加载完成后（推荐包裹在 $(document).ready() 中），为触发按钮绑定 click 事件，并调用 .text() 方法更新目标按钮文本：

   <script>
   $(document).ready(function() {
       $('#chnage_text_button').click(function() {
           $('#button_1_id').text('Dog');
       });
   });
   </script>

⚠️ 注意事项： ID 拼写需严格一致（如原示例中 chnage_text_button 实为 change 的拼写错误，但代码中需保持与 HTML 中完全一致）； .text('Dog') 会覆盖全部文本内容，若需保留 HTML 标签（如 <strong>, emoji 等），请改用 .html('Dog')； 若需切换状态（如 Cat ↔ Dog），可结合条件判断或数据属性实现：

   $('#chnage_text_button').click(function() {
       const $target = $('#button_1_id');
       const current = $target.text();
       $target.text(current === 'Cat' ? 'Dog' : 'Cat');
   });

该方案简洁、可靠，是 jQuery 入门级 DOM 操作的典型范例。掌握此模式后，可轻松扩展至修改任意元素文本、切换类名、显示隐藏内容等常见交互功能。