单击按钮时更改按钮的文本

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;
}