本文介绍如何利用 jquery 的 click 事件和 text() 方法，实现点击一个按钮后动态更改另一个按钮的显示文本，适用于基础交互式网页开发场景。
在网页开发中，常需通过用户交互（如点击）来动态更新页面元素内容。一个典型需求是：点击“更改文本”按钮，将另一个按钮上的文字从 “Cat” 变为 “Dog”。这可通过 jQuery 轻松实现——核心在于绑定点击事件，并操作目标元素的文本内容。
✅ 实现步骤
-
引入 jQuery 库（推荐使用 CDN）
或 底部加载 jQuery，否则 $ 函数不可用：
确保 -
编写 HTML 结构
定义两个按钮，分别设置唯一 id 便于精准选择：
-
添加交互逻辑（JavaScript/jQuery）
在 DOM 加载完成后（推荐包裹在 $(document).ready() 中），为触发按钮绑定 click 事件，并调用 .text() 方法更新目标按钮文本：
⚠️ 注意事项： ID 拼写需严格一致（如原示例中 chnage_text_button 实为 change 的拼写错误，但代码中需保持与 HTML 中完全一致）； .text('Dog') 会覆盖全部文本内容，若需保留 HTML 标签（如 , 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 操作的典型范例。掌握此模式后，可轻松扩展至修改任意元素文本、切换类名、显示隐藏内容等常见交互功能。
