j查询隐藏/显示DIV功能不起作用

Question

我正在使用API通过AJAX/jQuery加载数据。我希望在单击按钮时显示一个div 并隐藏另一个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 中。

Answer 1

你可以

使用 jQuery toggle 函数，它切换元素的可见性(即它显示隐藏的元素并隐藏可见的元素(。

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

Answer 2

您可以在两个类之间切换，如下所示以显示/隐藏div。

$('button').on(
  'click',
  function() {
    $('div').toggleClass('groups','matches')
  }
);

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

Answer 3

如果您检查控制台，它会告诉您出了什么问题。用于click处理程序的语法不正确。

它应该如下：

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

Answer 4

你有一个额外的 }(;不需要的地方。

此代码有效：https://jsfiddle.net/tyddlywink/g65e3sc0/

新的Javascript：

$(function() {
  $("button").click(function() {
    $(".groups").show("");
    $(".matches").hide("");
  });
});

Answer 5

我已经更新了代码。

如果动态创建div，则需要确保 click 事件处理程序将针对新元素，因此需要使用 $(document(...如果您(并且应该(使用类来定位这些内容，您将需要它。

$(function() {
  $(document).on('click', 'button', 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>

Answer 6

您可以使用.toggle()在每次单击时显示一个div，然后显示另一个div。请确保在.click回调方法中包含两个.toggle()方法：

$("button").click(function() {
  $(".groups").toggle();
  $(".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>