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要素が耳を傾け可能なイベントがあります。

あなたは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); 
    }); 
}); 

Answer 2

あなたは、ブラウザのパフォーマンスが低下しており、常に行う必要はありません。それは.video-jsように思える

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