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

Question

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

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

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

Answer 2

您不想更改类 - 如果您需要委托，以便将事件注册到像文档这样的静态容器

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

我建议改为切换：

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

没有切换

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

<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 3

click 事件仅在您添加它的元素在第一次创建 DOM 时构建时才有效。一旦您将按钮的类名从“显示”更改为“隐藏”，这将在基于事件的意义上“将其从 DOM 中移除”。

要在更改按钮上的类名后触发按钮单击事件，您必须使用 on() 函数分配单击事件，并且该函数必须放置在将触发事件的元素的父容器上.在下面的示例中，我已将 on() 方法添加到文档对象，因此文档中具有 .hide 或 .show 类的所有元素都将继承这些单击事件。这也适用于您动态创建的任何新元素。

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

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

<script>
    $(document).on('click', ".show", function(){
        $(".content").show();
        $(this).addClass("hide");
        $(this).removeClass("show");
        $(this).text("Hide");
    });
    $(document).on('click', ".hide", function(){
        $(".content").hide();
        $(this).addClass("show");
        $(this).removeClass("hide");
        $(this).text("Show");
    });
</script>

您还应该使用@mplungjan 建议的 toggleClass() 方法。

这是 on() 函数 https://api.jquery.com/on/ 的 jQuery 文档

Answer 4

$("#show-hide").toggle(function() {
  $(".content").hide();
  $(this).text("Show");
}, function() {
  $(".content").show();
  $(this).text("Hide");
});

<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 id="show-hide">Hide</button>