Question

我有一个flash对象，我试图显示并隐藏其余隐藏的div。没有flash对象，隐藏的div工作得很好。页面加载时，此样式会隐藏div：

<style>
div {display:none;}
p {display:none;}
div p {display:none;}
</style>

但是当我添加flash对象时，它总是出现。

<div id="hidden1">
  <p id="audioplayer_1">Alternative content</p>
  <script type="text/javascript">
    AudioPlayer.embed("audioplayer_1", {soundFile: "http://yoursite.com/path/to/mp3_file.mp3"});  
  </script>
</div>

flash对象是Wordpress Audio Player，它带有自己的Javascript文件，似乎会导致播放器对象替换带有id的元素，例如'audioplayer_1'，如下面的安装示例所示（来自播放器的文档）。

除了样式之外，我是否需要在文档加载时使用一些JQuery代码来尝试覆盖播放器对象的“always show”字符？如果是这样，我需要针对什么事件？

   1. <html>  
   2.     <head>  
   3.         <title>Your website</title>  
   4.   
   5.         ...  
   6.   
   7.         <script type="text/javascript" src="path/to/audio-player.js"></script>  
   8.         <script type="text/javascript">  
   9.             AudioPlayer.setup("http://yoursite.com/path/to/player.swf", {  
  10.                 width: 290  
  11.             });  
  12.         </script>  
  13.   
  14.     </head>  
  15.     <body>  
  16.   
  17.         <p id="audioplayer_1">Alternative content</p>  
  18.         <script type="text/javascript">  
  19.         AudioPlayer.embed("audioplayer_1", {soundFile: "http://yoursite.com/path/to/mp3_file.mp3"});  
  20.         </script>  
  21.   
  22.         <p id="audioplayer_2">Alternative content</p>  
  23.         <script type="text/javascript">  
  24.         AudioPlayer.embed("audioplayer_2", {soundFile: "http://yoursite.com/path/to/mp3_file_2.mp3"});  
  25.         </script>  
  26.   
  27.     </body>  
  28. </html>

Answer 1

我使用swfobject解决了这样的问题。解决方案是在显示div之前不调用embed（）方法。因此，如果您使用的是jQuery，那么您的HTML可能如下所示：

<a href="#audioplayer_1">Play 1</a>
<div id="hidden1">
  <p id="audioplayer_1">Alternative content</p>
</div>

对于jQuery来说就像：

$('a').click(function(
    target = $(this).attr('href');
    $('p'+target).parent().show(); // show the div
    AudioPlayer.embed("audioplayer_1", {soundFile: "mp3_file.mp3"}); // load the audio player
));

Answer 2

首先，您粘贴的演示代码没有隐藏div中的音频播放器。你确定他们实际上是一个隐藏的元素吗？

如果玩家仍然坚持要显示，你可以将它们隐藏在document.ready event：

中

<html>
    <head>  
        <title>Your website</title>  

        ...  

        <script type="text/javascript" src="path/to/audio-player.js"></script>  
        <script type="text/javascript">  
            AudioPlayer.setup("http://yoursite.com/path/to/player.swf", {  
                width: 290  
            });

            $(document).ready(function() {
                $('.hidden object').hide();
                $('.hidden').hide();
            });
        </script>  

    </head> 
    <body> 

      <div class="hidden">
        <p id="audioplayer_1">Alternative content</p>  
        <script type="text/javascript">  
        AudioPlayer.embed("audioplayer_1", {soundFile: "http://yoursite.com/path/to/mp3_file.mp3"});  
        </script>  
      </div>

      <div class="hidden">
        <p id="audioplayer_2">Alternative content</p>  
        <script type="text/javascript">  
        AudioPlayer.embed("audioplayer_2", {soundFile: "http://yoursite.com/path/to/mp3_file_2.mp3"});  
        </script>  
      </div>
    </body>  
</html>

没有测试过代码 - 如果它不起作用，请告诉我。

如何在我崇拜隐藏的div中覆盖flash插件的“always show”属性？

2 个答案: