Question

我正在尝试使用jQuery实现简单的隐藏/显示功能。我有两组框：A和B。我希望能够单击一个按钮仅查看A组中的框，而单击另一个按钮仅显示B组。这不应该取决于先前页面上发生的情况，或按钮的按下顺序。

基于the jQuery UI hide() function的官方基本代码示例，我使用的策略是单击按钮具有两种效果：首先，隐藏两个组中的所有框，第二，隐藏组中的框我想看看。还有一个按钮显示所有框，基本上起着重置的作用。

有时这是可行的，有时却没有（下面的MVCE片段）。从全新页面加载或重置开始时，我可以单击按钮以显示组A，这很好。但是，当我单击按钮显示组B时，组A按钮仍留在屏幕上。或者，从新的页面/重置中，我可以单击B组按钮并仅查看B组中的框，然后单击A组按钮并仅查看A组中的框，但是我不能仅返回B组

对控制台和其他组的一些调查显示，这与DOM顺序有关。我总是可以选择想要的任何给定组，但是如果我尝试显示一个出现在DOM中较早的组，事情就会变得混乱。

什么是导致当前行为的原因，我该如何解决？

$(function() {
  $("#toggleAll").on("click", function() {
    $('.box').removeAttr("style").hide().fadeIn();
  });

  $("#toggleA").on("click", function() {
    $('.box').hide('clip', {}, 1000);
    $('.groupA').removeAttr("style").hide().fadeIn();
  });

  $("#toggleB").on("click", function() {
    $('.box').hide('clip', {}, 1000);
    $('.groupB').removeAttr("style").hide().fadeIn();
  });
});

.box {
  border: 1px solid black;
}

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
</head>

<body>

<p>Show boxes of type:</p>
<button id="toggleAll">Show all</button>
<button id="toggleA">Show group A</button>
<button id="toggleB">Show group B</button>

<hr />

<div id="a1" class="box groupA">
  <h4>Title</h4>
  <p>Text for box A1</p>
</div>
<div id="a2" class="box groupA">
  <h4>Title</h4>
  <p>Text for box A2</p>
</div>

<div id="b1" class="box groupB">
  <h4>Title</h4>
  <p>Text for box B1</p>
</div>
<div id="b2" class="box groupB">
  <h4>Title</h4>
  <p>Text for box B2</p>
</div>

</body>
</html>

Answer 1

只需尝试使用所有其他选项，然后使用简单的dtmt[vs == 1, .(num_cars = .N, avg_qsec = mean(qsec)), by = list(gear, carb, am)] gear carb am num_cars avg_qsec 1: 4 1 1 4 19.22 2: 3 1 0 3 19.89 3: 4 2 0 2 21.45 4: 4 4 0 2 18.60 5: 4 2 1 2 18.56 6: 5 2 1 1 16.90和hide()，或者使用show()

fadeIn()

$(function() {
  $("#toggleAll").on("click", function() {
    $('.box').fadeIn();
  });

  $("#toggleA").on("click", function() {
    $('.box').hide();
    $('.groupA').fadeIn();
  });

  $("#toggleB").on("click", function() {
    $('.box').hide();
    $('.groupB').fadeIn();
  });
});

.box {
  border: 1px solid black;
}

jQuery UI隐藏对早期DOM元素无效

1 个答案: