Я пытаюсь реализовать простую функцию скрытия / отображения, используя jQuery. У меня есть две группы блоков: A и B. Я хочу иметь возможность нажать одну кнопку, чтобы увидеть только блоки из группы A, и другую кнопку, чтобы показать только группу B. Это не должно зависеть от того, что происходило на странице ранее. или порядок нажатия кнопок.
Основываясь на официальном базовом примере кода для функции jQuery UI hide() , я использую стратегию, в которой нажатие кнопки имеет два эффекта: во-первых, скрыть все поля из обеих групп и во-вторых, покажите коробки из группы, которую я хочу увидеть. Также есть кнопка для отображения всех ящиков, которая в основном работает как сброс.
Иногда это работает, иногда нет (фрагмент кода 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>