使用切换按钮定位变量

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>