jQuery предоставляет простые и эффективные инструменты для манипуляции DOM. Если вам нужно скрыть внешний div, если его внутренний div пустой, следуйте этой инструкции.
Подготовка HTML-разметки
Начнем с HTML-структуры с двумя вложенными div-ами. Один из них будет внутренним, а второй - внешним. Обязательно подключите jQuery.
<!-- Подключение jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<div class="bordered">
<h2>Содержимое блока bordered</h2>
<div class="toc">Содержимое блока TOC</div>
</div>Создание скрипта jQuery
Теперь создадим скрипт jQuery, который будет проверять, пуст ли внутренний блок .toc и соответственно скрывать или отображать внешний блок .bordered.
$(document).ready(function() {
// Проверяем, пуст ли блок .toc при загрузке страницы
if ($.trim($('.toc').text()) === "") {
$('.bordered').hide(); // Скрываем блок .bordered, если блок .toc пуст
}
// При изменении содержимого блока .toc
$('.toc').on('input', function() {
// Проверяем, пуст ли блок .toc
if ($.trim($(this).text()) === "") {
$('.bordered').hide(); // Скрываем блок .bordered, если блок .toc пуст
} else {
$('.bordered').show(); // Показываем блок .bordered, если блок .toc не пуст
}
});
});Тестирование и применение
Сохраните оба файла (HTML и скрипт jQuery), откройте HTML-файл в вашем веб-браузере и начните редактировать содержимое блока .toc. Как только содержимое в блоке .toc становится пустым, блок .bordered автоматически скрывается; в противном случае блок .bordered отображается.
Этот простой пример демонстрирует, как можно использовать jQuery для динамического управления видимостью элементов на странице в зависимости от содержимого других элементов. Подобный подход может быть полезен, например, для создания динамических интерфейсов в веб-приложениях.
