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

Question

我是jQuery的新手，我试图在不使用jQuery的切换函数的情况下创建一个show/hide切换按钮，但我不知道下面的代码有什么问题。

“隐藏”按钮可成功隐藏段落。隐藏部分起作用了。它添加了一个类“show”，删除了类“hide”，并更改了按钮的文本。我使用Dev工具来查看这个部分，这个部分正在工作，但是再次点击按钮就不工作了，即show部分。

null

$(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>

null

Answer 1

您不想更改类--如果您想更改，则需要委托，以便将事件注册到一个静态容器，如document

$(document).on("click",".hide",function() {

我建议改为切换：

null

$(document).ready(function() {
  $(".but").on("click",function() {
    $(".content").toggle();
    $(this).text($(this).text()=="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="but">Hide</button>

Answer 2

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

null

$(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>