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

Question

尽管它应该非常简单，但是由于某种原因，它无法正常工作。有人可以告诉我为什么吗？

在HTML中，我将此按钮创建为：

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

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

$(document).ready(function() {
   $("#T4").click(function() {
      $("#T4").prop('value', '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>

方法2：

使用<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.io/marchmello/pen/zYvBMJR

Answer 5

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