使用切換按鈕定位變量

Question

我已經將我的HTML5項目進一步了 - 我有一個最後的絆腳石，它是：我設置了一個變量，並有三個按鈕給它一個不同的值 - 每個值應該關聯到一個不同的mp3文件，我想我的大'播放'按鈕播放任何MP3（變量）已被選中。然後，我希望按鈕關閉或再次單擊時停止播放。

我已經深入了一點（在提示腳趾），所以任何幫助/建議，將不勝感激。我已經通過了jQuery和HTML5音頻筆記走了，但找不到什麼太大的幫助

感謝您的幫助，

吉姆

Answer 1

現場演示（我能理解反正！）：

• http://jsfiddle.net/CZLcR/29/

JS

var selectedMP3; 

$('input[name=mp3_option]').change(function() { 
    selectedMP3 = $('input[name=mp3_option]:checked').val(); 
}); 

$('#controlButton').click(function() { 
    var $this = $(this); 

    if($this.text() == 'Play') { 
     $this.children().children().text('Pause'); 
    } else { 
     $this.children().children().text('Play'); 
     alert('Stopped playing song: '+selectedMP3); 
     $('input[name=mp3_option]').attr('checked',false).checkboxradio('refresh'); 
    } 
}); 

HTML

<div data-role="page" id="home"> 
    <div data-role="content"> 
     <div data-role="fieldcontain"> 
    <fieldset data-role="controlgroup"> 
     <legend>Choose a song:</legend> 
      <input type="radio" name="mp3_option" id="radio-choice-1" value="song-1.mp3" /> 
      <label for="radio-choice-1">MP3 1</label> 

      <input type="radio" name="mp3_option" id="radio-choice-2" value="song-2.mp3" /> 
      <label for="radio-choice-2">MP3 2</label> 

      <input type="radio" name="mp3_option" id="radio-choice-3" value="song-3.mp3" /> 
      <label for="radio-choice-3">MP3 3</label> 

      <input type="radio" name="mp3_option" id="radio-choice-4" value="song-4.mp3" /> 
      <label for="radio-choice-4">MP3 4</label> 
    </fieldset> 
</div> 


     <a href="#" data-role="button" data-inline="true" id="controlButton">Play</a> 
    </div> 
</div>