Dynami c обнаруживает класс и удаляет некоторые другие классы в JQuery - PullRequest
Новая
       22

Dynami c обнаруживает класс и удаляет некоторые другие классы в JQuery

0 голосов
/ 21 февраля 2020

Я пытаюсь настроить html медиаплеер (т.е. Kaltura), добавив / удалив некоторые css классы на плеере Воспроизведение и пауза .

Используя следующий код javascript, я могу успешно воспроизвести / запустить игрока, нажав на них: 

(a) <button type="button" class="button ada-el-focus transparent video-playback-control"></button>
(b) <i class="playkit-icon playkit-icon-play"></i>

Примечание : их нужно нажимать последовательно

При этом я добавляю несколько классов: 

(a) "video-playing" (result: <section class="module flex_content_hero video-playing">)
(b) "video-active video-playing" (result: <li class="slide hide-text-on-play video-active video-playing">)


<section class="module flex_content_hero video-playing">
    <li class="slide hide-text-on-play video-active video-playing">
        <div id="kaltura-player-id">
            <div class="playkit-player playkit-Windows playkit-Firefox playkit-hover playkit-metadata-loaded playkit-size-md">
                <div class="playkit-player-gui" id="player-gui">
                    <button class="playkit-control-button">
                        <div>
                            <i class="playkit-icon playkit-icon-play"></i>
                        </div>
                    </button>
                </div>
            </div>
        </div>
        <div class="video-controls-container">
            <button type="button" class="button ada-el-focus transparent video-playback-control"></button>
        </div>
    </li>
</section>


<script type="text/javascript">

    $(document).on('click', 'button.button.ada-el-focus.transparent.video-playback-control', function(event) {
        event.preventDefault();
        $("i.playkit-icon.playkit-icon-play").click();
        $('.slide.hide-text-on-play').addClass('video-active video-playing');
        $('.module.flex_content_hero').addClass('video-playing');
    });

</script>

Проблема: Когда игрок находится в режиме паузы, я получаю класс "playkit-state-paused" (i.e. <div class="playkit-player playkit-Windows playkit-Firefox playkit-hover playkit-metadata-loaded playkit-state-paused playkit-size-md">).

Мне нужно обнаружить этот класс (playkit-state-paused) и удалить класс "video-playing", который я добавил два раза раньше, когда инициация / игра игрока.

Результат: 

(a) <section class="module flex_content_hero video-playing"> into <section class="module flex_content_hero">
(b) <li class="slide hide-text-on-play video-active video-playing"> into <li class="slide hide-text-on-play video-active">

Обратите внимание: "Video-active" остается прежним ТОЛЬКО удаление "video-playing" на пауза проигрывателя .

Мне нужно добавить несколько логик JQuery в тот же код JavaScript или автономный код. Я знаю, что мы можем использовать hasClass() здесь, но я не могу обнаружить "playkit-state-paused" на пауза игрока , и мне нужны некоторые указатели - как реализовать логи c

Конец html должен выглядеть следующим образом: 

<section class="module flex_content_hero">
    <li class="slide hide-text-on-play video-active">
        <div id="kaltura-player-id">
            <div class="playkit-player playkit-Windows playkit-Firefox playkit-hover playkit-metadata-loaded playkit-state-paused playkit-size-md">
                <div class="playkit-player-gui" id="player-gui">
                    <button class="playkit-control-button">
                        <div>
                            <i class="playkit-icon playkit-icon-play"></i>
                        </div>
                    </button>
                </div>
            </div>
        </div>
        <div class="video-controls-container">
            <button type="button" class="button ada-el-focus transparent video-playback-control"></button>
        </div>
    </li>
</section>
...