jQuery中的切换函数

Question

我正在使用切换功能来显示和隐藏内容，效果很好，我唯一的问题是当我放置视频时，即使隐藏了视频也会继续播放，有什么办法可以停止播放隐藏时的视频

$(document).ready(function(){
    $("button").click(function(){             
        $("p").toggle();
    });
});



 <button>Toggle</button>

  <p>the video is displayed here</p>

Answer 1

你可以这样做：

$(document).ready(function(){
$("button").click(function(){
    $("p").toggle();
    if (document.getElementById('myVideo').paused) 
      document.getElementById('myVideo').play();
    else 
      document.getElementById('myVideo').pause();
});
});

如果视频已暂停，则播放，如果正在播放，则点击暂停。

Answer 2

我想你会想要检查你的包装 p 元素是否可见，使用 $("p").is(":visible")。

如果可见，请使用document.getElementById("yourVideoId").pause() 暂停视频，显然将"yourVideoId" 替换为<video> 标记上id 属性中的任何内容。然后，在你这样做之后，你可以在你的 p 元素上调用 .toggle()。

如果它不可见，并且用户单击了您的切换按钮，我想您只想显示视频，而不是继续播放它，因为这对用户来说可能有点刺耳。但是，如果您确实需要该功能，只需在下面示例中的 else 块中添加 document.getElementById("video").play()。

这是一个演示功能的工作示例：

$(document).ready(function() {
    $("button").click(function() {
        var p = $("p");
        if (p.is(":visible")) {
          document.getElementById("video").pause();
          $(this).text("Show");
        } else {
          $(this).text("Hide");
        }
        p.toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<video id="video" controls width="40%"> 
  <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
</p>
<button>Hide</button>

在视频中添加了width="40%"，使其适合 sn-p 窗口。