更改按钮的文本

Question

我正在做一个项目，我必须更改带有一些淡入淡出效果的按钮的文本。但我做不到。我应该单击按钮，它的文本应该淡出，然后它们与其他文本一起淡入。为此，我正在使用 jQuery

$("#button_fade").on("click", function(){
    if($(this).text() == "HELLO") {
         $(this).text().fadeOut(function(){
             $(this).text("WORLD").fadeIn();
         });
    }
});

我已经尝试过此代码，但它不起作用。

Answer 1

.text()函数returns一个字符串，它没有fadeOut()方法。你想运行元素本身的那个方法，你不需要先调用 .text()。

$("#button_fade").on("click", function() {
  if ($(this).text() == "HELLO") {
    $(this).fadeOut(function() {
      $(this).text("WORLD").fadeIn();
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button_fade">HELLO</button>

如果您的目的只是淡出文本，而不是整个按钮，则需要在按钮内放置一个元素并对其执行淡入淡出效果。

$("#button_fade").on("click", function() {
  if ($(this).text() == "HELLO") {
    $(this).children("span").fadeOut(function() {
      $(this).text("WORLD").fadeIn();
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button_fade"><span>HELLO</span></button>

更改按钮的文本

Change the text of a button

jquery

text

fade

button