Форум Сайтостроение Веб-строительство

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

12
R
На сайте с 01.12.2012
Offline
86
Radrigo
129

Всем привет.

Подскажите, как сделать присвоение класса соседнему блоку, когда в слайдере показывается блок с 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
На сайте с 13.10.2014
Offline
171
silicoid
#1
ну так вы же сами дали ссылку на решение проблемы
там есть обработчик события $('#carouselExampleControls').on('slide.bs.carousel' или ' slid.bs.carousel ' ......
просто смотрите через консоль $(this) и многое станет сразу понятно
R
На сайте с 01.12.2012
Offline
86
Radrigo
#2
silicoid #:
ну так вы же сами дали ссылку на решение проблемы
там есть обработчик события $('#carouselExampleControls').on('slide.bs.carousel' или ' slid.bs.carousel ' ......
просто смотрите через консоль $(this) и многое станет сразу понятно
После вашего комментария сообразил. Спасибо)
R
На сайте с 01.12.2012
Offline
86
Radrigo
#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
На сайте с 13.10.2014
Offline
171
silicoid
#4
Radrigo #:

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

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

R
На сайте с 01.12.2012
Offline
86
Radrigo
#5
silicoid #:

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

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

R
На сайте с 01.12.2012
Offline
86
Radrigo
#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", а не после того, как переход завершится

include в php большого Резкий всплеск прямых заходов. Помощь в фильтрации ботов
S
На сайте с 13.10.2014
Offline
171
silicoid
#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
это избавит сайт от проблем, если, например, что-то не успеет загрузиться или отрендериться до исполнения скрипта

S
На сайте с 13.10.2014
Offline
171
silicoid
#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
На сайте с 01.12.2012
Offline
86
Radrigo
#9
silicoid #:
практически все правильно сделали, но можно было упростить
и самое главное.
не забывайте оборачивать код использующий jQuery в конструкцию $(document).ready
это избавит сайт от проблем, если, например, что-то не успеет загрузиться или отрендериться до исполнения скрипта

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

VK представила новый партнерский AdSense начинает давать рекомендации Помощь в фильтрации ботов
S
На сайте с 13.10.2014
Offline
171
silicoid
#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"

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий