Добавление класса при просмотре определенного блока в слайдере Bootstrap

Radrigo

19 декабря 2020, 16:39

111

Всем привет.

Подскажите, как сделать присвоение класса соседнему блоку, когда в слайдере показывается блок с id=»dark». Карусель реализована при помощи Bootstrap v4.5.3

Имеется вроде такого html кода

<header id="header"></header>

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
                <section class="carousel-item active">...</section>
                <section id="dark" class="carousel-item">...</section>
                <section class="carousel-item">...</section>
        </div>
</div>

Такой вариант не срабатывает

    <script>
        function init() {
                if (jQuery('#dark').hasClass('active')) {
                    jQuery('#header').addClass('summary');
                }
            }
            init();
    </script>

Вероятно это реализовывается через события, но как сделать, не понимаю.

Заранее признателен за подсказку.

silicoid

19 декабря 2020, 18:37

ну так вы же сами дали ссылку на решение проблемы
там есть обработчик события $(‘#carouselExampleControls’).on(‘slide.bs.carousel’ или ‘ slid.bs.carousel ‘ ……
просто смотрите через консоль $(this) и многое станет сразу понятно

Radrigo

19 декабря 2020, 19:31

silicoid #:
ну так вы же сами дали ссылку на решение проблемы
там есть обработчик события $(‘#carouselExampleControls’).on(‘slide.bs.carousel’ или ‘ slid.bs.carousel ‘ ……
просто смотрите через консоль $(this) и многое станет сразу понятно

После вашего комментария сообразил. Спасибо)

Radrigo

19 декабря 2020, 20:21

Поспешил. Работает, но не так как надо. Добавляет класс почему-то только следующему блоку. То есть класс добавляется только только тогда, когда блог с id=»dark» исчезает. Когда он активен, класс не добавляется. Подскажите пожалуйста, что я сделал не так

        $('#carouselExampleControls').on('slide.bs.carousel', function () {
                        if (jQuery('#dark').hasClass('active')) {
                                jQuery('#header').addClass('dark-fon');
                        } else {
                                jQuery('#header').removeClass('dark-fon');
                        }
        });

silicoid

20 декабря 2020, 10:30

Radrigo #:

так сложно сказать. Надо иметь доступ к пациенту. Но первое, что приходит в голову, попробуйте сменить обработчик на slid.bs.carousel

Radrigo

20 декабря 2020, 11:55

silicoid #:

Спасибо. Помогло. Но теперь появилась другая проблема. Класс не добавляется, если при загрузке сайта первый блок в слайдере загружается с id=»dark». Класс добавляется к блоку с этим id только при перелистывании на него

Radrigo

20 декабря 2020, 12:34

Решил проблему при загрузке сайта добавлением еще одной функции. Она нормально срабатывает именно в тот момент, если у первого блока при загрузке сайта присутствует блок с id=»dark»

                <script>
                        function init() {
                                if (jQuery('#dark').hasClass('active')) {
                                        jQuery('#header').addClass('dark-fon');
                                } else {
                                        jQuery('#header').addClass('light-fon');
                                }
                        }
                        init();
                        $('#carouselExampleControls').on('slid.bs.carousel', function () {
                                if (jQuery('#dark').hasClass('active')) {
                                        jQuery('#header').removeClass('light-fon').addClass('dark-fon');
                                } else {
                                        jQuery('#header').removeClass('dark-fon').addClass('light-fon');
                                }
                        });
                </script>

Может кто-то подскажет еще, как-то сделать, чтобы класс добавлялся в начале перехода к блоку с id=»dark», а не после того, как переход завершится

silicoid

20 декабря 2020, 17:37

практически все правильно сделали, но можно было упростить

<script>
        function init(){
                if (jQuery('#dark').hasClass('active')) {
                        jQuery('#header').removeClass('light-fon').addClass('dark-fon');
                } else {
                        jQuery('#header').removeClass('dark-fon').addClass('light-fon');
                }
        }
                        

        $(document).ready(function(){
                $('#carouselExampleControls').on('slid.bs.carousel', function () {
                        init(); 
                });
                init();         
        })
</script>

и самое главное.
не забывайте оборачивать код использующий jQuery в конструкцию $(document).ready
это избавит сайт от проблем, если, например, что-то не успеет загрузиться или отрендериться до исполнения скрипта

silicoid

20 декабря 2020, 17:41

если вам надо производить более низкоуровневую работу с блоком, можно использовать MutationObserver()
https://developer.mozilla.org/ru/docs/Web/API/MutationObserver

MutationObserver — Интерфейсы веб API | MDN

2020.10.15
developer.mozilla.org

предоставляет возможность получать уведомления об изменении определённых DOM-элементов. является заменой Mutation Events, определённой в спецификации DOM3 Events. Конструктор Параметры Вызывается при каждом изменении DOM-элемента. Обзёрвер вызывает данную функцию с двумя аргументами. Первым аргументом является массив объектов MutationRecord…

Radrigo

20 декабря 2020, 18:10

silicoid #:
практически все правильно сделали, но можно было упростить
и самое главное.
не забывайте оборачивать код использующий jQuery в конструкцию $(document).ready
это избавит сайт от проблем, если, например, что-то не успеет загрузиться или отрендериться до исполнения скрипта

Спасибо большое.
Может знаете, как сделать, чтобы класс добавлялся, когда переход между блоками только начинается, а не после того, как завершится? Сейчас добавляется тогда, когда блок с id=»dark» полностью покажется.
Пример можно посмотреть здесь http://moiseenko.gusev-online.ru/

silicoid

20 декабря 2020, 20:09

Radrigo #:
Может знаете, как сделать, чтобы класс добавлялся, когда переход между блоками только начинается, а не после того, как завершится? Сейчас добавляется тогда, когда блок с id=»dark» полностью покажется.

попробуйте проверять по событию ‘slide.bs.carousel’ (это событие инициализируется в момент начала скролла, а ‘slid.bs.carousel’ в конце ) только надо проверять не наличие класса active (jQuery(‘#dark’).hasClass(‘active’)) , а наличие класса .carousel-item-next или .carousel-item-prev то-есть будет что-то вроде
if (jQuery(‘#dark’).hasClass(‘ carousel-item-next ‘) || jQuery(‘#dark’).hasClass(‘ carousel-item-prev ‘) ) { …

UPD. еще одна штука
ID — параметр уникальный. то-есть он может быть только один на страницу. Соответственно, если у вас, вдруг, будет несколько слайдов с черным фоном, то во-первых это будет совсем не валидно, а во вторых, в некоторых браузерах оно может вообще не работать. Поэтому лучше помечать темные страницы не id=»dark», а class=»dark»

Похожие записи:

Добавить комментарий Отменить ответ