HTML5音頻標籤+ jQuery的：切換激活鍵

Question

<div id="audio-player"> 

    <div> 

     <img id="playButton" 
    onclick="document.getElementById('stars').play(); 
     document.getElementById('playButton').toggle(
      function(){ $(this).attr("src", "playbutton-active.png"); }, 
      function(){ $(this).attr("src", "playbutton-inactive.png"); });" 
     src="playbutton-inactive.png"> 

     <img id="pauseButton" 
    onclick="document.getElementById('stars').pause(); 
    document.getElementById('pauseButton').toggle(
     function(){ $(this).attr("src", "pausebutton-active.png"); }, 
     function(){ $(this).attr("src", "pausebutton-inactive.png"); });" 
     src="pausebutton-inactive.png"> 

     <img id="stopButton" 
    onclick="document.getElementById('stars').pause(); 
    document.getElementById('stars').currentTime = 0; 
    document.getElementById('stopButton').toggle(
     function(){ $(this).attr("src", "stopbutton-active.png"); }, 
     function(){ $(this).attr("src", "stopbutton-inactive.png"); });" 
     src="stopbutton-inactive.png"> 

    </div> 

    <audio id="stars"> 
    <source src="stars-in-the-night-sky.mp3"> 
    <source src="stars-in-the-night-sky.ogg"> 
    </audio> 

我也試過來代替的getElementById（ '爲playButton'），使用$（本）.toggle但有效/無效圖像不切換。當我沒有切換語句時，自定義按鈕可用於開始/暫停/停止音頻。添加切換，控件不再起作用，儘管最初的不活動控制圖像顯示出來。我也意識到，我需要一個單獨的功能來重置其他按鈕時，一個是切換。

Answer 1

您應該嘗試「$（」＃playButton「）。toggle（..）;」。 你需要有一個jQuery對象...

使用此方法，而不是：

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#playButton").click(function(){ 
     $(this).toggle(..); 
    }); 
    }); 
</script> 

您還可以看到jQuery的用戶界面和它的「按鈕」的方法！