javascript - 在按钮 jquery 中更改和改回文本

Question

我想要一个 jquery 按钮事件，第一次单击按钮时会出现一个 div(类 .explanation)并且文本发生变化，第二次单击时 div 是隐藏，文本变回原始文本。我可以做第一部分，但第二部分不起作用。在下面的更改中 - (toggleClass("hidden") - 到 - .fadeOut... - 也不起作用所以我认为我有问题 if 和 else。提前致谢

$("button:nth-of-type(1)").click(function() {
  if (this.text = "Read Explanation") {
    $(".explanation").fadeIn("slow", function() {});
    $(this).text("Hide Explanation");
  } else {
    $(this).text("Read Explanation");
    $(".explanation").toggleClass("hidden");
  }
});

Answer 1

改变

if(this.text = "Read Explanation") {

到

if($(this).text() === "阅读说明") {

演示:

$("button:nth-of-type(1)").click(function() {
  if ($(this).text() === "Read Explanation") {
    //$(".explanation").fadeIn("slow", function() {});
    $(this).text("Hide Explanation");
  } else {
    $(this).text("Read Explanation");
  }

  $(".explanation").toggleClass("hidden");
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div><button>Read Explanation</button></div>
<div class="explanation hidden">explanation</div>

1. $(this) 是带有 text() 属性的 jquery 对象，而 this 是纯 js在这种情况下，没有 text 或 text() 属性的对象。

2. = 是赋值运算符，而 === 是比较运算符