javascript - 显示/隐藏切换按钮未按预期工作

Question

我是 jQuery 的新手，我试图在不使用 jQuery 的切换功能的情况下创建一个显示/隐藏切换按钮，但我无法弄清楚以下代码有什么问题。

隐藏按钮成功隐藏了段落。隐藏部分正在工作。它添加了一个“显示”类并删除了“隐藏”类并更改了按钮的文本。我使用 Dev Tools 看到了这一点，这部分工作正常，但再次单击按钮不起作用，即显示部分。

$(document).ready(function() {
  $(".hide").click(function() {
    $(".content").hide();
    $(this).addClass("show");
    $(this).removeClass("hide");
    $(this).text("Show");
  });
  $(".show").click(function() {
    $(".content").show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="hide">Hide</button>

Answer 1

您可以使用 toggle() 使用单个按钮轻松切换元素的可见状态。然后，您可以向 text() 提供一个函数，以根据按钮的当前值设置按钮上的文本。试试这个:

$(document).ready(function() {
  $(".toggle").click(function() {
    $(".content").toggle();
    $(this).text(function(i, t) {
      return t == 'Show' ? 'Hide' : 'Show';
    })
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="toggle">Hide</button>

如果你想在没有 toggle() 的情况下这样做，那么你可以使用 toggleClass() 来切换 hide 类的状态，像这样:

$(document).ready(function() {
  $(".toggle").click(function() {
    $(".content").toggleClass('hide');
    $(this).text(function(i, t) {
      return t == 'Show' ? 'Hide' : 'Show';
    })
  });
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="toggle">Hide</button>