不断检查何时添加 CSS class

Question

我正在尝试在视频暂停时显示一个元素。我正在使用 video.js，目前，如果视频播放、暂停、结束等，则会添加类。

我不能做的是使用 .hasClass() 检查并显示元素。到目前为止，我正在使用这个：

 if ($('.video-js').hasClass('vjs-paused')) {
    $('.btn').addClass('show');}
    else {
      $('.btn').removeClass('show');

    }

我想我需要经常检查任何更改，但我真的不知道该怎么做。

我也看到了一个叫 watch 的插件，但不知道怎么用。

这是代码笔：

https://codepen.io/florinsimion/pen/wWjxzA

Answer 1

您不需要经常这样做，这会降低浏览器的性能。 video元素有可以监听的事件：

$('.video-js').on('pause play', function () {
  if ($(this).hasClass('vjs-paused')) {
    $('.wrapper').addClass('show');
  } else {
    $('.wrapper').removeClass('show');
  }
});

Answer 2

似乎 .video-js 不是要监听的正确元素。

你可以使用videojs API:

player.on('pause', function () {
    $('.btn').addClass('show');
});

player.on('play', function () {
    $('.btn').removeClass('show');
});

见CodePen

或者使用jQuery监听视频对象的事件：

$(function() {
  $('video#content_video_html5_api').on('play pause', function() {
    $('.btn').toggleClass('show', $(this).get(0).paused);
  });
});

不断检查何时添加 CSS class

Constantly check when a CSS class is added

javascript

jquery

video.js