如何使用 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

简单，只需使用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 3

有很多方法可以实现这一目标。

方法一：

使用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">

方法三：

使用纯 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 4

$(document).ready(function(){

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

      $("#T4").html('show');

   });

});

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

Answer 5

$(document).ready(function() {

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

       $(this).text('Show');

    });

});