代码之家 › 专栏 › 技术社区 › SOLO mozboz

隐藏的jquery用户界面对早期的dom元素无效

jquery-ui jquery javascript

SOLO mozboz · 技术社区 · 6 年前

我正在尝试使用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>

1 回复 | 直到 6 年前

toffler 6 年前

只需在没有所有附加选项的情况下进行尝试,然后使用简单的 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;
}

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