javascript - キューポイントでクリック時に div を表示する

Question

なぜこれがうまくいかないのですか？

cuepoint.jsの使用; HTML5 ビデオ内でキューポイントを定義できます。しかし; そうしたいです; さらに、クリック時に #div を表示します。そしてクリックのみ。ビデオが再開したら。または画像が再度クリックされます。ビデオが再開し、#div が消えます!!!!

   #playdiv1 {
        display: none;
    }

$('#1').click(function() { 
  cuepoint.setTime(1)();
  $("playdiv1").style.display = "block"; // Why wont this work?
});

この div は、que: とともに表示されます。

<div id="playdiv1" style="min-height: 300px; min-width: 500px; display: hidden;">

</div>

参照中のライブラリ。 http://cuepoint.org/

これは意味がありません。キューポイント時間。作品..

$('#1').click(function(){ 
  cuepoint.setTime(0)();

しかし、「$('#playdiv1').show();」を追加するとそのすぐ下。うまくいかない？

$('#1').click(function(){ 
  cuepoint.setTime(0)();
  $('#playdiv1').show();
});

score 1 · Accepted Answer

セレクターが間違っています。

あなたのコードは$("playdiv1")、タイプの要素と一致しますが<playdiv1></playdiv1>、これはあなたが望むものではありません。

正しいコードは、 id$("#playdiv1")を持つ要素を選択します。 playdiv1

styleまた、要素の周りのjQueryラッパーに属性を設定しようとしています。.showメソッドを使用するか、最初に一致した要素にアクセスする必要があります。

これらのいずれかが機能します：

$('#playdiv1').show();

// or

$('#playdiv1')[0].style.display = "block";

score 0 · Accepted Answer

順序の切り替えは何とか機能しました。

$('#1').click(function(){ 
  $('#playdiv1').show();
   cuepoint.setTime(0)(); // Having this at the bottom; or after the show.
});

score 0 · Accepted Answer

あなたはこれを使うことができます...

$('#1').on('click', function() { 
  cuepoint.setTime(1)();
  $("#playdiv1").show();
});

そして、タグdisplay: hidden;のスタイルプロパティを削除します...<div>

score 0 · Accepted Answer

CSS で playdiv1 を隠しているため、HTML とインラインで表示宣言を行う必要はありません。削除してください -

<div id="playdiv1" style="min-height: 300px; min-width: 500px;">

jQueryを次のように変更します

$('#playdiv1').show();

4 に答える 4