Таргетинг на переменную с помощью переключателя - PullRequest
Новая
       23

Таргетинг на переменную с помощью переключателя

1 голос
/ 06 февраля 2012

Мой проект HTML5 продвинулся немного дальше - у меня есть последний камень преткновения: я установил переменную и у меня есть три кнопки, которые присваивают ей другое значение - каждое значение должно относиться к отдельному mp3-файлу, хочу, чтобы моя большая кнопка «play» воспроизводила любую выбранную mp3 (переменную). Затем я хочу, чтобы кнопка выключалась или прекращала воспроизведение при повторном нажатии.

Я немного не в себе (на кончиках пальцев), поэтому любая помощь / совет будет принята с благодарностью. Я просмотрел аудиозаписи Jquery и html5, но не могу найти ничего слишком полезного (что я могу понять в любом случае!)

Спасибо за любую помощь,

Jim

1 Ответ

2 голосов
/ 06 февраля 2012

Live Demo:

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>
...