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>

我还尝试使用$(this)代替getElementById('playButton')。切换但活动/非活动图像不切换。当我没有切换语句时，自定义按钮可以启动/暂停/停止音频。添加切换后，控件不再起作用，尽管初始的非活动控件图像会显示出来。我还意识到，当一个按钮被切换时，我需要一个单独的函数来重置其他按钮。

Answer 1

你应该试试"("# playButton")美元.toggle(. .);"。你需要有一个JQuery对象…

使用这个方法，而不是:

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

你也可以看到JQuery-ui和它的"button"方法!