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

86

Radrigo

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

133

Всем привет.

Подскажите, как сделать присвоение класса соседнему блоку, когда в слайдере показывается блок с 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>

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

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

S

171

silicoid

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

#1

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

R

86

Radrigo

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

#2

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

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

R

86

Radrigo

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

#3

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

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

S

171

silicoid

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

#4

Radrigo #:

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

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

R

86

Radrigo

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

#5

silicoid #:

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

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

R

86

Radrigo

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

#6

Решил проблему при загрузке сайта добавлением еще одной функции. Она нормально срабатывает именно в тот момент, если у первого блока при загрузке сайта присутствует блок с 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", а не после того, как переход завершится

Полноэкранный блок Загрузка форума Перевод всех партнеров на

S

171

silicoid

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

#7

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

<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
это избавит сайт от проблем, если, например, что-то не успеет загрузиться или отрендериться до исполнения скрипта

Настройка целей Яндекс.Метрика Javascript : почему не Странный глюк с jQuery(document).ready()

S

171

silicoid

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

#8

если вам надо производить более низкоуровневую работу с блоком, можно использовать 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...

R

86

Radrigo

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

#9

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

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

Полноэкранный блок Бесплатно отвечаю на вопросы Рекомендательный виджет

S

171

silicoid

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

#10

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"

el.hasClass в JS Вопрос по javascript DLЕ В шаблоке Нету

VK приобрела 70% в структуре компании-разработчика red_mad_robot

Переиграть и победить: как анализировать конкурентов для продвижения сайта