Buggy javascript按鈕事件處理程序

Question

我試圖在我的頁面上實現一個音樂播放器。我有一張表，每行代表一首歌曲，第一個元素是一個按鈕，其id是歌曲的URL。

 <tbody> 
     {% for e in entries %} 
      <tr> 
       <td><button class="song btn" id="{{ e.url }}"><i class="icon-play-circle"></i></button></td> 
       <td>{{ e.title }}</td> 
       <td>{{ e.artist }}</td> 
       <td>{{ e.features }}</td> 
       <td>{{ e.genre }}</td> 
       <td><a href="/myapp/editsong/{{ e.id }}">Edit</a></td> 
      </tr> 
     {% endfor %} 
     </tbody> 

我想實現一些JavaScript來更改頁面上的HTML5音頻元素的src當按鈕被點擊其ID：

$("button.song").on("click", function(event){ 
    if (audio.src != event.target.id) 
    { 
     audio.src = event.target.id; 
     play.className = 'btn btn-success'; 
     pause.className = 'btn'; 
     audio.play(); 
    } 
}); 

此實現工作有點，但很越野車。有時點擊一個按鈕會將音頻元素src更改爲空白，我將不得不多次單擊該按鈕。

Answer 1

使用javascript警報檢查參數event.target.id以進行調試。點擊按鈕查看每個音頻的值。

if (audio.src != event.target.id) 
... 

Answer 2

我真的不知道，但如果我的記憶沒有失敗，我，還有關於什麼是限制，你應該使用其他屬性的URL保存到您正在嘗試運行的歌「範圍「的字符允許的id屬性。

也許值屬性沒有這個限制。儘管我會使用更多「僅字母數字」作爲對象/數組的引用，然後使用它來獲取值。

問候！ Gonzalo G.