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”更改为“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(){});之类的内容。

首先，在HTML标题中包含jQuery库。

然后创建一个新的javascript文件，也包含它（通常这是在包含jQuery之后放的）

在新的javascript文件中写下以下内容

$(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/（更整洁的文字：http://jsfiddle.net/JRRm2/2/）

切换第一次点击

1 个答案: