javascript - 使用 cuepoint 单击时显示 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")匹配 type 的元素<playdiv1></playdiv1>，这不是您想要的。

正确的代码选择带有id$("#playdiv1")的元素。 playdiv1

您还尝试style在元素周围的 jQuery 包装器上设置属性。您需要使用该.show方法，或访问第一个匹配的元素。

这些中的任何一个都可以工作：

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

// or

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

score 0 · Accepted Answer

由于您有隐藏 playdiv1 的 CSS，因此您不需要与 HTML 内联的显示声明，因此请删除它 -

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

并将jQuery更改为

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

score 0 · Accepted Answer

你可以用这个...

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

并删除标签display: hidden;中的样式属性...<div>

score 0 · Accepted Answer

以某种方式切换订单有效；

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

4 回答 4