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>

使用切换按钮定位变量

1 个答案: