2

我有一个 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 音频播放器，它带有自己的 Javascript 文件，这似乎会导致播放器对象替换具有诸如“audioplayer_1”之类的 id 的元素，如下面的安装示例（来自播放器的文档）。

除了样式，我是否需要一些关于文档加载的 JQuery 代码来尝试覆盖播放器对象的“始终显示”字符？如果是这样，我需要定位什么事件？

   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>
4

2 回答 2

3

我已经使用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
));
于 2009-07-19T21:00:26.463 回答
2

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

如果玩家仍然坚持显示，您可以将它们隐藏在 document.ready 事件中：

<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>

尚未测试代码 - 如果它不起作用，请告诉我。

于 2009-07-19T18:45:10.447 回答