При пустом блоке выводить надпись?

У меня есть два выпадающих списка, направление в танцах и школы , при выборе соответствующих пунктов в нем , появляется таблица, но к некоторым пунктам её нет ,и при выборе этих пунктов страница остаётся пустая.
Как реализовать, что если страница пустая то выводится надпись: "В этой школе не проводится занятия по данному направлению" ?

JS:
var dance = $('#dance');
var school = $('#school');
var box = $('.shedule-item');
$('#dance, #school').change(function() {
   box.hide().filter(function() {
     return $(this).data('dance') == dance.find('option:selected').data('dance') && $(this).data('school') == school.find('option:selected').data('school')
   }).show();
});
  • Вопрос задан
  • 315 просмотров
Пригласить эксперта
Ответы на вопрос 1
sergski
@sergski
web-developer
Установите блок с этим текстом на странице с классом display: none; Если данных нет -- удаляйте класс, если есть -- добавляйте класс.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        .hidden {
            display: none;
        }
    </style>

    <script>
        window.onload = function () {

            var foo = document.querySelector(".shedule-items");
            var message = foo.innerHTML;
            var oops = document.querySelector(".oops");

            if(message) {
                oops.classList.toggle("hidden");
            } 
        
        }
    </script>
</head>
<body>
    <div class="shedule-items"></div>

    <div class="oops">oops!</div>

</body>
</html>


или jquery
<script>
            $(document).ready(function() {
                var foo = $(".shedule-items");
                var message = foo.html();
                var oops = $(".oops");

                if(message) {
                    oops.toggleClass("hidden");
                }
            });
    </script>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы