不断检查何时添加CSS类

Question

我正在尝试在视频暂停时显示一个元素.我正在使用video.js,目前,如果视频播放,暂停,完成等,则会添加课程.

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

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

    }

我想我需要不断检查任何变化,但我真的不知道该怎么做.

我还看过一个名为watch的插件但不知道如何使用它.

这是一个codepen:

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');
  }
});