Question

单击按钮时更改按钮的文本。当我点击按钮时，如果显示使其隐藏。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

首先将事件绑定到它，我的意思是点击事件

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

DEMO

Answer 2

将您的代码更改为此

HTML

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

脚本

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

Demo

Answer 3

最好应用一些属性（如类）来指示按钮的状态。此外，当您单击链接时，浏览器将跟随它，防止它（如果需要的话）。并且只有在加载所有内容时才会触发您的函数，但在单击元素时则不会触发。将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;
}

我点击它时更改按钮的文本

4 个答案:

DEMO