jQuery UI隐藏对早期DOM元素无效 [英] jQuery UI hiding not taking effect for early DOM elements
问题描述
我正在尝试使用jQuery实现简单的隐藏/显示功能.我有两组框:A和B.我希望能够单击一个按钮以仅查看A组中的框，而单击另一个按钮以仅显示B组.这不应该取决于先前页面上发生的情况，或按钮的按下顺序.
I'm trying to implement simple hide/show functionality using jQuery. I have two groups of boxes: A and B. I want to be able to click one button to see just the boxes from group A, and a different button to show just group B. This should not depend on what's happened on the page previously, or the order of button presses.
基于 jQuery UI hide()函数的官方基本代码示例，我正在使用单击按钮具有两个效果的策略:首先，隐藏两个组中的所有框，其次，显示我要查看的组中的框.还有一个按钮可以显示所有框，基本上起着复位的作用.
Based on the official basic code sample for the jQuery UI hide() function, I'm using a strategy where a button click has two effects: first, hide all the boxes from both groups, and second, reveal the boxes from the group I want to see. There's also a button to show all boxes, which basically functions as a reset.
有时这可行，有时却无效(下面的MVCE片段).从全新页面加载或重置开始时，我可以单击按钮以显示组A，就可以了.但是，当我单击按钮显示组B时，组A按钮仍留在屏幕上.或者，从新的页面/重置中，我可以单击B组按钮并仅看到B组中的框，然后单击A组按钮并仅看到A组中的框，但是我不能只回到B组
Sometimes this works, sometimes it doesn't (MVCE snippet below). When I start from a fresh page load or a reset, I can click the button to show group A, and it's fine. When I click on the button to show group B, though, the group A buttons stay on the screen. Or, from a fresh page/reset, I can click on the group B button and see just boxes from group B, then the group A button and see just boxes from group A, but then I can't get back to just group B.
对控制台和其他组的一些调查显示，这与DOM顺序有关.我总是可以选择想要的任何给定组，但是如果我随后尝试显示一个出现在DOM中较早的组，事情就会搞砸了.
A bit of investigation with the console and additional groups has revealed that this has something to do with DOM order. I can always select any given group that I want, to start with, but things get messed up if I then try to show a group that appears earlier in the DOM.
什么是导致当前行为的原因，我该如何解决?
What's causing the current behavior, and how can I fix it?
$(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>
推荐答案
只需尝试使用所有其他选项，然后使用简单的hide()和show()，或者使用fadeIn()
Just try it without all your additional options and use the simple hide() and show(), or in your case the 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>
这篇关于jQuery UI隐藏对早期DOM元素无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
