jQuery沒有正確地通過jPlayer中的Ci數據循環

我想要做的是循環遍歷在我的數據庫中的2個urls。到目前爲止，我已經得到它爲第一行工作，但我需要它通過兩行循環。到目前爲止，它只是循環遍歷數據庫中的第一個url兩次。我試着讓'＃jquery_jplayer_1'一堂課，但這似乎仍然不起作用。任何想法或幫助？jQuery沒有正確地通過jPlayer中的Ci數據循環

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<?php include("vh.php"); ?> 
<?php $query = $this->db->query("SELECT * FROM music"); 
     foreach ($query->result() as $row) { 
?> 
     <!-- Example code to create a simple player using jPlayer 2.1.0 --> 

     <!-- Skins are defined in CSS. Uncomment the following CSS reference and comment out the one below it to switch skins --> 

     <!--<link href="http://jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />--> 
     <link href="http://jplayer.org/latest/skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" /> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
     <script type="text/javascript" src="http://jplayer.org/2.1.0/js/jquery.jplayer.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 

       $(".jquery_jplayer_1").jPlayer({ 
        ready: function(event) { 
         $(this).jPlayer("setMedia", { 
          mp3: "<?=$row->songURI?>", 
         }); 
        }, 
        swfPath: "http://www.jplayer.org/2.1.0/js", 
        supplied: "mp3" 
       }); 
      }); 
     </script> 

    </head> 
    <body> 
     <div class="jquery_jplayer_1" class="jp-jplayer"></div> 

     <div id="jp_container_1" class="jp-audio"> 
      <div class="jp-type-single"> 
       <div class="jp-gui jp-interface"> 
        <ul class="jp-controls"> 

         <!-- comment out any of the following <li>s to remove these buttons --> 

         <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li> 
         <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li> 
         <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li> 
         <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li> 
         <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li> 
         <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li> 
        </ul> 

        <!-- you can comment out any of the following <div>s too --> 

        <div class="jp-progress"> 
         <div class="jp-seek-bar"> 
          <div class="jp-play-bar"></div> 
         </div> 
        </div> 
        <div class="jp-volume-bar"> 
         <div class="jp-volume-bar-value"></div> 
        </div> 
        <div class="jp-current-time"></div> 
        <div class="jp-duration"></div>     
       </div> 

       <div class="jp-no-solution"> 
        <span>Update Required</span> 
        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. 
       </div> 
      </div> 
     </div> 
    </body> 

    <!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> 

<head> 
<?php } ?>

來源

2012-05-15 Michael Grigsby

我不知道PHP ..但你只是輸出整個頁面2次？！ – mkoryak

是的。它輸出兩次 –

@MichaelGrigsby那是你的第一個問題;你包括jQuery庫和一切兩次。 – Sampson

所以你在這裏有幾個問題。他們大多數在js。另外我看了看jplayer api，看起來它一次只能播放一首歌，這就是爲什麼你在那裏有那個循環。

這是你們的問題：

理想情況下，你想擁有jQuery的一個文件準備好功能。這使得你的代碼更少。如果你能在這種情況下提供幫助，我會做出一個功能。在您的代碼中，選擇器$(".jquery_jplayer_1")將返回一個包含2個元素的jquery對象（因爲在循環之後頁面上有該類的2個div），但是由於您有2個函數將jplayer啓動爲這2個元素（第一個隨着MP3＃1然後MP3＃2）你要麼在第二初始化打破jplayer或將它們都設置爲MP3＃2
你在你的setMedia對象中有一個尾隨逗號：mp3: "<?=$row->songURI?>", - 這將打破一個非常神祕js錯誤。刪除尾隨逗號。
你在空jplayer div上有2個class屬性！

正確的方式做，這將是：

移動環路是圍繞2周jplayer的div中，container和空球員的div
在循環確保輸出類別爲jquery_jplayer_1和jquery_jplayer_2，容器的類型相同

在ready函數內放置第二個循環，以向jplayer輸出單獨的init調用。這裏是第二循環迭代輸出應該是什麼樣子：

 $(".jquery_jplayer_2").jPlayer({ 
      ready: function(event) { 
       $(this).jPlayer("setMedia", { 
        mp3: "<?=$row->songURI?>" 
       }); 
      }, 
      cssSelectorAncestor: '.jp_container_2', 
      swfPath: "http://www.jplayer.org/2.1.0/js", 
      supplied: "mp3" 
     });

注意，我加入cssSelectorAncestor：」 .jp_container_2'你需要有一個在你的初始化函數來告訴它該容器使用。每個球員應該有一個單獨的容器。

我希望這有助於

也，你有在底部的一些額外的文檔類型的廢話。

來源

2012-05-15 11:03:49 mkoryak

謝謝你的幫助人！ –

如果這是有幫助的隨時接受答案 – mkoryak

jQuery沒有正確地通過jPlayer中的Ci數據循環

回答

相關問題