單擊按鈕時更改按鈕的文本

Question

單擊按鈕時更改按鈕的文本。 當我單擊按鈕時，如果它顯示使其隱藏。

  $(function () { if ($(".clickMe").text() == 'show') { $(".clickMe").text("hide") } else { $(".clickMe").text("show") } }); 

 <a href="#" class="clickMe">ShowDetials</a> 

Answer 1

首先將事件綁定到它，我的意思是單擊事件

$(".clickMe").click(function(){
  $(this).text($(this).text() == "show" ? "hide" : "show");
});

演示

Answer 2

將您的代碼更改為此

HTML

<a href="#" class="clickMe">show</a>

腳本

$(function () {
    $('.clickMe').click(function(){
        $(this).text($(this).text() == "show" ? "hide" : "show");
     });
});

演示版

Answer 3

最好應用一些屬性（如類）來指示按鈕的狀態。 另外，當您單擊鏈接時，瀏覽器將跟隨它，防止出現這種情況（如果需要的話）。 而且，在加載所有內容時，只會觸發一次函數，而在單擊element時不會觸發。 將click事件綁定到元素：

 $(document).ready(function() { $(".btn").click(function(e) { e.preventDefault(); // prevent from following link. if ($(this).hasClass('active')) { $(this) .removeClass('active') .text('Show Details'); } else { $(this) .addClass('active') .text('Hide Details'); } }); }); 

 .btn { text-decoration: none; border: 1px solid green; padding: 5px 10px; font-weight: bold; color: #454545; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="http://example.com" class="btn">Show Details</a> 

Answer 4

通用功能

HTML部分

<button type="submit" onclick="changeText(this,'Checking.. Please wait...')">Login</button>

JS部分

// function to change text
function changeText(ref,text){
   ref.innerHTML = text;
}