Question

我有一个与youtube的iframe的div（它可以是任何媒体网站的iframe。你只是一个例子）。我需要在点击按钮时显示或隐藏它。

我可以轻松切换div的可见性，但div内的视频会继续播放。我真正需要做的是完全删除div的内容并重新插入div的内容，而不是简单地更改display css属性。

这是我的html设置。

<div id="container">
  <div id="ytContainer">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/wbkrlHDKvgE" frameborder="0" allowfullscreen></iframe>
  </div>
  <button id="toggle">Show/Hide Video</button>
</div>

到目前为止我的jQuery代码 -

<script>
  $(function(){
    $("#toggle").click(function(){
      $("#ytContainer").toggle();
    });
  });
</script>

jQuery detach看起来像是可以在这里工作的功能，但到目前为止我还没能使它工作。

所以，我的问题是：如何使用jQuery完全删除div的内容并将其重新插入命令？

jsFiddle for testing

编辑：我最终得到了以下代码。当我想删除html并在需要时重新插入html时，使用data-属性来存储html内容。

$("#toggle").click(function(){
  var content = $(this).attr("data-content");
  if(content){
    $("#ytContainer").html(content);
    $(this).attr("data-content","");
  }else{
    content = $("#ytContainer").html();
    $(this).attr("data-content",content);
    $("#ytContainer").html("");
  }     
});

还有比这更好的解决方案吗？

切换div时禁用并启用视频

0 个答案: