jQuery 分离 div，追加 div答案

【问题标题】：jQuery detach div, append divjQuery 分离 div，追加 div
【发布时间】：2012-03-03 01:45:29
【问题描述】：

在 Chrome/Safari 中，一旦灯箱关闭，Vimeo 视频将继续在后台播放。此时“分离”可以停止视频，但是当您关闭灯箱并单击菜单项以重新打开视频时，视频 div 为空白。我尝试了“克隆”和“附加”，但无法重新输入视频。

网站功能：单击“a”“b”“c”，视频会出现灯箱。点击灯箱中的“X”，灯箱内容关闭。

    HTML/CSS 
    a id="alphaa" <------ The  a, b, c menu item, when clicked, open the lightbox
    .abcbox_content <------- The div that holds all the content for the lightbox
    #videowrapper <------ div that holds the Vimeo iframe
    .abc-align-right <---- the "X" to close the lightbox

这是我目前拥有的 jQuery。

    <script type="text/javascript">
    $(document).ready(function(){
    $(".abc-align-right").click(function() {
    $("#videowrapper").clone(true); 
    $("#videowrapper").contents().detach();
    if ($(".abcbox_content").is(':visible'))
    $("#videowrapper").append();
    }); });
    </script>

感谢您的帮助

【问题讨论】：

标签： jquery video append detach

【解决方案1】：

看起来您正在克隆元素，但没有使用克隆。试试这个：

<script type="text/javascript">
    $(document).ready(function(){
    $(".abc-align-right").click(function() {

        $("#videowrapper").replaceWith($("#videowrapper").clone(true)); 

    });
    </script>

【讨论】：

感谢您的回复。这会显示视频，但会将视频放在最底部的文本块下。也许引用了错误的 div？
也许吧。你可以试试$("#videowrapper").replaceWith($("#videowrapper").clone(true));
我真的不知道是否需要所有其他的东西。只需换掉元素并称之为好。我编辑了我的答案。
这仅适用于视频 a。我必须为另外两个制作 div 并为它们添加 jquery。

【解决方案2】：

您还可以使用 Vimeo Javascript API 暂停和取消暂停视频。

见：http://vimeo.com/api/docs/player-js

你必须为 iframe 分配一个 id，然后是这样的：

$(".abc-align-right").click(function() {
  $("#iframe_id").postMessage({ "method": "pause" });
});

每当你让灯箱出现时，调用：

 $("#iframe_id").postMessage({ "method": "play" });

由于您需要它来处理同一页面上的 3 个视频，您还可以为 iframe 或单独的 id 使用一个类。

【讨论】：

是的，我看到了，但是在将“api=1”添加到 url 后他们失去了我
感谢发布。我会试一试。