时间戳

首页 > 解决方案 > jQuery隐藏/显示DIV功能不起作用

jquery - jQuery隐藏/显示DIV功能不起作用

问题描述

我正在使用 API 通过 AJAX/jQuery 加载数据。当我单击按钮时，我希望一个 div 显示而另一个隐藏，但是我无法使用我拥有的代码来实现它，有什么想法吗？

$(function() {
  $("button").click(function() {
    $(".groups").show("");
  });
  $(".matches").hide("");
});
.groups {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click me</button>
<div class="groups">
  <p>test</p>
</div>
<div class="matches">
  <p>test 2</p>
</div>

显然，为了简单起见，我已经去掉了 AJAX/jQuery，但是数据将被加载到提供的 div 中。

标签： jquery

解决方案

您可以只使用 jQuerytoggle函数，它切换元素的可见性（即它显示隐藏的元素并隐藏可见的元素）。

$(function() {
  $("button").click(function() {
    $(".groups, .matches").toggle();
  });
});
.groups {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click me</button>
<div class="groups">
  <p>test</p>
</div>
<div class="matches">
  <p>test 2</p>
</div>

推荐阅读