如何使用 jQuery 更改按钮的文本？

Question

尽管它应该非常简单，但由于某种原因，它不起作用。有人能告诉我为什么吗？

在 HTML 中，我创建了这个按钮：

<button id="T4">Hide</button>

在 jQuery 中，我创建了这个函数来在单击同一按钮时更改该按钮的文本。

$(document).ready(function() {

   $("#T4").click(function() {

      $("#T4").prop('value', 'Show');

   });

});

现在我想做的是，我有一个带有文本“隐藏”的按钮，当单击它时，它会将其文本更改为“显示”。很简单吧？但由于某种原因，它似乎不起作用。有人可以帮我解决这个问题吗？

Answer 1

只需使用text()：&nbsp;$(document).ready(function(){&nbsp; &nbsp; $("#T4").click(function(){&nbsp; &nbsp; &nbsp; &nbsp;$("#T4").text('Show');&nbsp; &nbsp;});&nbsp;});

Answer 2

简单，只需使用text()，因为你没有输入值属性$(document).ready(function(){&nbsp; &nbsp;$("#T4").click(function(){&nbsp; &nbsp; &nbsp; $("#T4").text('Show');&nbsp; &nbsp;});});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="T4">Hide</button>

Answer 3

有很多方法可以实现这一目标。方法一：使用html()。这是一个例子：$(document).ready(function(){&nbsp; &nbsp;$("#T4").click(function(){&nbsp; &nbsp; &nbsp; $("#T4").html("Show");&nbsp; &nbsp;});});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><button id="T4">Hide</button>方法二：使用<input>元素代替<button>.这是一个例子：$(document).ready(function(){&nbsp; &nbsp;$("#T4").click(function(){&nbsp; &nbsp; &nbsp; $("#T4").attr("value", "Show");&nbsp; &nbsp;});});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="button" id="T4" value="Hide">方法三：使用纯 JavaScript ( innerHTML)。这是一个例子：$(document).ready(function(){&nbsp; &nbsp;$("#T4").click(function(){&nbsp; &nbsp; &nbsp; document.getElementById('T4').innerHTML = "Show";&nbsp; &nbsp;});});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><button id="T4">Hide</button>这就是你想要做的（使用html()）：let bShow = true;$(document).ready(function(){&nbsp; &nbsp;$("#T4").click(function(){&nbsp; &nbsp; &nbsp; if(bShow == true) {&nbsp; &nbsp; &nbsp; &nbsp; $("#T4").html("Show");&nbsp; &nbsp; &nbsp; &nbsp; bShow = false;&nbsp; &nbsp; &nbsp; } else if(bShow == false) {&nbsp; &nbsp; &nbsp; &nbsp; $("#T4").html("Hide");&nbsp; &nbsp; &nbsp; &nbsp; bShow = true;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;});});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><button id="T4">Hide</button>现场演示： https:&nbsp;//codepen.io/marchmello/pen/zYvBMJR

Answer 4

$(document).ready(function(){&nbsp; &nbsp;$("#T4").click(function(){&nbsp; &nbsp; &nbsp; $("#T4").html('show');&nbsp; &nbsp;});});我认为你必须使用 html() 来更改 jquery 中任何元素的文本。

Answer 5

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