Как изменить текст кнопки с 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

Есть много способов достичь этого.

Метод 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 3

просто, просто используйте text (), потому что вы не вводите значение attribut

$(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

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

Я думаю, вы должны использовать html (), чтобы изменить текст любого элемента в jquery.

Answer 5

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