2

非表示の div の残りの部分と一緒に表示および非表示にしようとしているフラッシュ オブジェクトがあります。flash オブジェクトがなければ、非表示の div がうまく機能します。ページが読み込まれると、このスタイルは div を隠したままにします:

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

しかし、フラッシュ オブジェクトを追加すると、常に表示されます。

<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 に答える