Question

我正在使用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所提供的文件中。

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

您可以使用"{ 'budget' : { $ne: [] } }"来显示一个div，然后每次单击都显示另一个。确保在您的.toggle()回调方法中同时包含两个.toggle()方法：

.click

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

.groups {
  display: none;
}

jQuery隐藏/显示DIV函数不起作用

6 个答案: