Переключение на первый клик

Question

Я пробовал два разных способа переключения кнопки воспроизведения/паузы на моем проигрывателе, ни одна из которых не срабатывает при первом щелчке по какой-либо причине.

Это один, якобы проверяет статус аудио, чтобы увидеть, если он остановлен или закончился:

function togglePlayPause() { 
var audioPlayer = document.getElementsByTagName('audio')[0]; 
var playpause = document.getElementById("playpause"); 
if (audioPlayer.paused || audioPlayer.ended) { 
    playpause.title = "pause"; 
    playpause.innerHTML = "pause"; 
} 
else { 
     playpause.title = "play"; 
    playpause.innerHTML = "play"; 
    } 
} 

Или я попробовал это один, который просто переключает через OnClick toggle(this):

function toggle(obj) { 
    if (obj.className== 'playButton') { 
     obj.className = 'pauseButton'; 
     obj.title = "PAUSE"; 
     obj.innerHTML = "PAUSE"; 
    } else { 
     obj.className = 'playButton'; 
     obj.title = "PLAY"; 
     obj.innerHTML = "PLAY"; 
     } 
    } 

Ни один из них не переключается при первом нажатии кнопки, хотя первый способ меняется от внутреннего «PLAY» по умолчанию, чтобы «играть», поэтому я думаю, что это что-то:

<a href="#" id="start" onclick="playPause();togglePlayPause();"><div title="play" class="playButton" id="playpause">PLAY</div></a> 

В обоих методах последующие щелчки работают нормально. Любая идея, почему это происходит? Может ли это иметь какое-то отношение к тому, как вызывается переменная audioPlayer? Массив начинается с 0. (Я держусь за соломинку.)

Большое спасибо, как обычно!

Answer 1

Я бы пошел без создания функций, я бы проверил, щелкнула ли ссылка, а затем перейдите к событиям, которые будут запущены.

так что-то вроде $("#start").click(function(){}); in можно попробовать.

Сначала у вас есть библиотека jQuery, включенная в ваш HTML-заголовок.

Затем создайте новый яваскрипт файл, включил его, а также (как правило, это ставится после того, как JQuery включен)

В вашем новом яваскрипта файле написать следующее

$(document).ready(function() { 
    $("#start, #stop, #play, #pause").click(function() { //you can have more or less selectors (selectors are the ones with #) 
     //Your code goes here 
    }); 
}); 

Вот скрипка для этого решение. http://jsfiddle.net/JRRm2/1/ (tidier text: http://jsfiddle.net/JRRm2/2/)