在网页交互中，经常需要通过一个按钮的操作去改变页面上其他元素的显示内容。比如点击“编辑”按钮后，把“提交”按钮的文字改成“保存并提交”，或者点击切换按钮后，让目标按钮在“展开”和“收起”之间来回切换。这类需求用原生 JavaScript 写会比较啰嗦，而用 jQuery 只需要几行代码就能搞定。本文将围绕“按钮 A 被点击时修改按钮 B 的文字”这个场景，详细讲解具体实现方式和常见的变体写法。
一、基础实现：click 事件加 text 方法
最基础的思路分三步：第一步，给触发操作的按钮绑定 click 事件；第二步，在事件回调函数里用选择器找到目标按钮；第三步，调用 text() 方法设置新的文字内容。jQuery 的 text() 方法非常直观，传参数时是设置内容，不传参数时是读取内容。
下面是一个完整的可运行示例，引入 jQuery 库后保存为 HTML 文件，浏览器打开即可看到效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btnTrigger">点我修改另一个按钮</button>
<button id="btnTarget">我是目标按钮</button>
<script>
$(document).ready(function(){
$("#btnTrigger").click(function(){
$("#btnTarget").text("文字已经被修改了");
});
});
</script>
</body>
</html>这段代码里有几个要点值得注意。首先，$("#btnTrigger") 通过 id 选择器拿到了触发按钮，id 在页面中是唯一的，所以效率最高。其次，事件处理逻辑写在 $(document).ready() 里，确保 DOM 加载完成后再执行，避免脚本找不到元素。最后，text("新的文字") 会把目标按钮内部的所有文本替换掉，无论按钮里原来有多少字。
二、text 与 html 的区别：选错方法可能留下隐患
很多初学者分不清 text() 和 html() 的区别，随便挑一个用，结果埋下了安全隐患。两者的差异在于：text() 只处理纯文本，任何 HTML 标签都会被当作普通字符串显示出来；而 html() 会把字符串当作 HTML 解析，标签会被浏览器渲染执行。
看下面这个对比示例就一目了然：
$("#btnTarget").text("<b>加粗文字</b>");
// 按钮上会原样显示 <b>加粗文字</b> 这串字符
$("#btnTarget").html("<b>加粗文字</b>");
// 按钮上的文字会真正加粗显示如果只是修改文字内容，强烈建议使用 text()。因为一旦新内容里混入了恶意脚本标签，html() 会直接执行它，造成 XSS 跨站脚本攻击风险。只有当你明确需要在按钮里嵌入图标标签（比如字体图标的 <span> 元素）时，才考虑使用 html()，且内容必须是可信来源。
三、进阶用法：状态切换与批量修改
1. 点击后在两个文字之间来回切换
实际项目中更常见的需求不是改一次就完事，而是每点击一次就切换一次显示状态。思路是每次点击时先读取目标按钮当前的文字，根据内容判断该切换成什么。示例代码如下：
$(document).ready(function(){
$("#btnTrigger").click(function(){
var target = $("#btnTarget");
if (target.text() === "展开") {
target.text("收起");
// 这里可以同时执行展开面板的逻辑
} else {
target.text("展开");
// 这里可以同时执行收起面板的逻辑
}
});
});这种写法的好处是逻辑集中，判断条件清晰。如果按钮文字可能来自多语言翻译，不建议用文字内容做判断条件，更好的做法是给目标按钮增加一个自定义属性 data-status，用 attr() 读写状态值来判断，这样切换语言后逻辑也不会失效。
2. 一次性修改一组按钮的文字
如果页面上有多个按钮需要同时改文字，用 class 选择器配合 jQuery 隐式遍历的特性，一行代码就能全部改掉：
<button class="langBtn">中文</button>
<button class="langBtn">中文</button>
<button class="langBtn">中文</button>
<script>
$("#btnTrigger").click(function(){
$(".langBtn").text("English");
});
</script>jQuery 会自动遍历所有匹配到的元素逐一调用 text()，不需要自己写 for 循环。如果每个按钮要改成不同的文字，可以改用 each() 遍历，配合索引或自定义属性输出不同的内容。
3. 利用 this 简化触发按钮自身的操作
如果需求是“点击某个按钮时把它自己的文字改掉，同时改另一个按钮”，事件回调里的 this 指向的就是被点击的那个 DOM 元素，包一层 $(this) 就能直接操作它：
$(".myBtn").click(function(){
$(this).text("我被点击过了");
$("#btnTarget").text("另一个按钮也变了");
});四、常见问题与注意事项
第一个常见的坑是脚本执行顺序。如果把事件绑定代码写在 head 里且没有包在 ready() 中，脚本执行时按钮还不存在，绑定会静默失败，点击没有任何反应。解决办法有两种：要么用 $(function(){ ... }) 包裹逻辑（这是 ready() 的简写形式），要么把 script 标签放到 body 末尾。
第二个问题是 <button> 标签别忘了写 type="button"。在 form 表单中，button 默认的 type 是 submit，点击后除执行你的代码外还会触发表单提交导致页面刷新，看起来就像“文字改了又立刻变回去”。显式声明 type="button" 可以避免这个干扰，或者在事件回调里用 return false 阻止默认行为。
第三点，如果同一按钮被多次绑定 click 事件（比如在循环或多次调用的函数里绑定），点击一次会触发所有绑定的处理函数，文字修改可能互相覆盖。遇到这种情况可以先用 off("click") 解绑旧事件再重新绑定，或者从 jQuery 1.7 开始统一使用更推荐的 on() 方法绑定事件：$("#btnTrigger").on("click", function(){ ... })，语义更清晰，也方便后续用 off() 统一解绑。
总结一下，核心套路就是“选择器定位触发按钮，click 绑定事件，text 修改目标按钮内容”。掌握了 text() 与 html() 的取舍、this 的指向以及事件绑定的时机，遇到更复杂的联动需求也能举一反三地实现。
jQuery按钮点击text方法动态修改文本修改时间：2026-09-07 04:58:30