如何用jQuery改变按钮的文字？

Question

虽然应该很简单，但是不知道为什么不能用。谁能告诉我为什么？

在HTML中，我把这个按钮创建为。

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

而在jQuery中，我创建了这个函数来改变同一个按钮的文字，当它被点击的时候。

$(document).ready(function() {
   $("#T4").click(function() {
      $("#T4").prop('value', 'Show');
   });
});

现在我想做的是，我有一个文本为 "Hide "的按钮，当它被点击时，它的文本就会改变为 "Show"。很简单吧？但由于某种原因，它似乎并不奏效。谁能帮我解决这个问题？

Answer 1

只要使用 text():

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

Answer 2

$(document).ready(function(){
   $("#T4").click(function(){
      $("#T4").html('show');
   });
});

我认为你必须使用html()来改变jquery中任何元素的文本。

Answer 3

很简单，只需使用text()，因为你不需要输入属性值。

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

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

Answer 4

有很多方法可以实现。

方法1:

使用 html(). 下面是一个例子。

$(document).ready(function(){
   $("#T4").click(function(){
      $("#T4").html("Show");
   });
});

<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(){
   $("#T4").click(function(){
      $("#T4").attr("value", "Show");
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="T4" value="Hide">

方法3:

使用纯javascript (innerHTML). 这里是一个例子。

$(document).ready(function(){
   $("#T4").click(function(){
      document.getElementById('T4').innerHTML = "Show";
   });
});

<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(){
   $("#T4").click(function(){
      if(bShow == true) {
        $("#T4").html("Show");
        bShow = false;
      } else if(bShow == false) {
        $("#T4").html("Hide");
        bShow = true;
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button id="T4">Hide</button>

一个活生生的演示。https:/codepen.iomarchmellopenzYvBMJR。

Answer 5

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