如何用jQuery修改按钮文本？我的实现为何无法生效？

嘿，我来帮你分析下为啥按钮文本改不了的问题～

问题根源 #

你用prop('value', 'Show')来修改按钮文本是踩了个小坑：<button>标签的显示内容是它的内部文本，而不是value属性。value属性主要给<input type="button">这类元素用的，对于<button>来说，value是表单提交时会传的参数值，和你看到的按钮上的文字完全没关系。

解决方法 #

我们需要用jQuery的text()或者html()方法来修改按钮的显示内容。如果想要实现点击一下从Hide变Show，再点又变回Hide的切换效果，可以这么写：

$(document).ready(function() {
  $("#T4").click(function() {
    // 先拿到当前按钮上的文字
    var currentText = $(this).text();
    // 判断后切换文本
    $(this).text(currentText === 'Hide' ? 'Show' : 'Hide');
  });
});

如果只是想点击后固定改成Show（不需要切换回去），代码可以更简单：

$(document).ready(function() {
  $("#T4").click(function() {
    $(this).text('Show');
  });
});

小补充：text()和html()的区别是，html()可以解析HTML标签（比如你想给按钮文字加个<b>加粗），而text()只会把内容当纯文本显示。如果只是普通文字，用text()更稳妥哦～

内容的提问来源于stack exchange，提问作者KingKong BigBong