Question

我在使用jQuery函数clone和append切换div的内容时遇到了问题。

简而言之，我使用两个链接来显示和隐藏Flash视频：link1显示video1并隐藏video2。 Link2显示video2并隐藏video1。

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="inc/jquery/jquery.js"></script>
</head>
<body>
<div class="leftcolumn">
  <div class="videoholder">
    <div id="box1">
      <object width="300" height="225">
        <param name="movie" value="http://www.youtube.com/v/uv9RpD4bbNw?fs=1&amp;hl=en_US&amp;rel=0">
        </param>
        <param name="allowFullScreen" value="true">
        </param>
        <param name="allowscriptaccess" value="always">
        </param>
        <embed src="http://www.youtube.com/v/uv9RpD4bbNw?fs=1&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="225"></embed>
      </object>
      <p> <a href="#" name="box2" class="sele" onclick="return false">View video in Spanish</a></p>
    </div>
    <div id="box2">
      <object width="300" height="225">
        <param name="movie" value="http://www.youtube.com/v/HxBRdJCV8Os&amp;hl=en_US&amp;fs=1?rel=0">
        </param>
        <param name="allowFullScreen" value="true">
        </param>
        <param name="allowscriptaccess" value="always">
        </param>
        <embed src="http://www.youtube.com/v/HxBRdJCV8Os&amp;hl=en_US&amp;fs=1?rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="225"></embed>
      </object>
      <p> <a href="#" name="box1" class="sele" onclick="return false">View video in English</a></p>
    </div>
  </div>
  <script type="text/javascript">

                            $("#box1").show().siblings().hide(); // Default video

                            $(".sele").click(function(){
                                switch(this.name) {
                                        case "box1" : 
                                                var box2 = $("#box2").clone(true);
                                                $("#box2").remove();
                                                $(".videoholder").append(box1);

                                                $(".videoholder").append(box2);
                                                $("#box1").show().siblings().hide(); //

                                                break;
                                        case "box2" : 
                                                var box1 = $("#box1").clone(true);
                                                $("#box1").remove();
                                                $(".videoholder").append(box2);

                                                $(".videoholder").append(box1);
                                                $("#box2").show().siblings().hide(); //

                                                break;
                                }
                            });

</script>
</div>
</body>
</html>

这是我在IE中使用它最接近的事情。我会更容易使用

    <script type="text/javascript">
    $("#box1").show().siblings().hide(); // Default
    $(".sele").click(function(){
    $("#" + this.name).show().siblings().hide();
    });
</script>

但这不适用于IE：隐藏的视频继续播放。

我感谢你想要分享的所有想法。

祝福。路易斯

Answer 1

您需要将WMODE设置为0或透明。 Fix'd：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="inc/jquery/jquery.js"></script>
</head>
<body>
<div class="leftcolumn">
  <div class="videoholder">
    <div id="box1">
  <object width="300" height="225">
    <param name="movie" value="http://www.youtube.com/v/uv9RpD4bbNw?fs=1&amp;hl=en_US&amp;rel=0">
    </param>
    <param name="allowFullScreen" value="true">
    </param>
    <param name="allowscriptaccess" value="always">
    </param>
    <param name="wmode" value="transparent"></param>
    <embed src="http://www.youtube.com/v/uv9RpD4bbNw?fs=1&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="225" wmode="transparent"></embed>
  </object>
  <p> <a href="#" name="box2" class="sele" onclick="return false">View video in Spanish</a></p>
</div>
<div id="box2">
  <object width="300" height="225">
    <param name="movie" value="http://www.youtube.com/v/HxBRdJCV8Os&amp;hl=en_US&amp;fs=1?rel=0">
    </param>
    <param name="allowFullScreen" value="true">
    </param>
    <param name="allowscriptaccess" value="always">
    </param>
    <param name="wmode" value="transparent"></param>
    <embed src="http://www.youtube.com/v/HxBRdJCV8Os&amp;hl=en_US&amp;fs=1?rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="225" wmode="transparent"></embed>
  </object>
  <p> <a href="#" name="box1" class="sele" onclick="return false">View video in English</a></p>
</div>
</div>
</div>
</body>
</html>

在IE8上jQuery问题克隆/附加flash电影

1 个答案: