Question

我创建了一个jQuery滑块，可以移动div来产生滑动效果。

链接是这样的：

<ul id="navigation">
   <li class="element"><a href="#item1" class="panel , current" id="no"></a></li>
   <li class="element"><a href="#item2" class="panel" id="no"></a></li>
   <li class="element"><a href="#item3" class="panel" id="no"></a></li>
   <li class="element"><a href="#item4" class="panel" id="yes"></a></li>
   <li class="element"><a href="#item5" class="panel" id="no"></a></li>
</ul>

我在＃item4 div中有一个YouTube iframe，并且当用户导航我正在使用时停止播放音频.remove（）;

例如

$('ul#navigation li.element a#no').click(function () {
    $('#video').remove();
});

这本身就可以正常使用。视频加载并可播放，如果点击任何#no链接，则div滑动并且视频停止播放。

我试图在使用以下方式点击#yes链接时重新添加视频：

$('ul#navigation li.element a#yes').click(function () {
        $('#video').replaceWith('<iframe id="video" title="Showreel" width="780" height="480" src="http://www.youtube.com/embed/XR3xr8PAuJY?rel=0" frameborder="0" allowfullscreen></iframe>');
    });

哪个不起作用并阻止.remove也不能正常工作。我认为这是因为所有的＆＃34;在iframe中无处不在的地方。

如何解决这个问题？

我尝试使用.show和.hide加上.css（＆＃34;显示＆＃34;＆＃34;无＆＃34;）但音频一直在播放。有没有比.remove和.replaceWith更好的方法呢？

谢谢大家

修改的

我刚刚意识到我可能会取消.remove，只需在点击#yes链接时使用.replaceWith插入iframe，但我仍然遇到语法问题。

问题可能是因为我试图用包含相同ID的html字符串替换#video吗？

编辑2 我无法弄清楚评论的降价。

我刚试过：

$('#videobox').append('<iframe id="video" title="Showreel" width="780" height="480" src="http://www.youtube.com/embed/XR3xr8PAuJY?rel=0" frameborder="0" allowfullscreen></iframe>');

其中#videobox是iframe在删除之前所处的div。这仍然打破.remove（）

Answer 1

您之前删除了#video元素，因此无法执行$('#video').replaceWith(...)。 $('#video')无法找到任何操作.replaceWith()的内容。

您必须使用.append()或其他jQuery DOM插入函数之一将新创建的iframe插入到右父对象中。

您可以使用Google的API从javascript控制iframe youtube视频。这是一个例子：http://jsfiddle.net/jfriend00/D9Zjf/。

使用.replaceWith（）的问题;用youtube iframe

1 个答案: