Javascript显示/隐藏播放/暂停按钮
[英]Javascript Show/Hide Play/Pause Buttons
问题描述
I have a Play and Pause button and I want the Play to turn into a Pause button when I click on it. 
我有一个“播放并暂停”按钮，当我单击它时，我希望“播放”变成一个“暂停”按钮。 I have my Play and Pause buttons ready in my CSS and my javascript in the head of my html. 我的CSS中有我的“播放”和“暂停”按钮，而html头中有我的javascript。
However, when I click on the Play button, the Pause one won't display. 但是，当我单击“播放”按钮时，“暂停”不会显示。
<script> $('#play').on('click', function(event) { currentPlayingTrack.play(); $('#pause').show(); $('#play').hide(); }); $('#pause').on('click', function(event) { currentPlayingTrack.pause(); $('#pause').hide(); $('#play').show(); }); </script>
#play, #pause { width:80px; height: 80px; background: transparent; position: relative; margin-top: 10px; display: block; } #play { width: 0; height: 0; border-left: 30px solid white; border-right: 30px solid transparent; border-top: 30px solid transparent; border-bottom: 30px solid transparent; position: absolute; content: ""; top: 10px; left: 25px; } #pause:before { width: 10px; height: 60px; background: white; position: absolute; content: ""; top: 10px; left: 25px; } #pause:after { width: 10px; height: 60px; background: white; position: absolute; content: ""; top: 10px; right: 25px; }
<div> <a href="#" id="play"></a> <a href="#" id="pause" style="display: none;"></a> </div>
What am I doing wrong ? 我究竟做错了什么 ？
3 个解决方案
解决方案1
1 已采纳 2017-02-17 05:35:18
You say that your javascript is in the head of your html, but that means that it will be loaded and run before your buttons are added to the DOM, ie, they will not be available to add a listener to. 您说您的javascript位于html的头部，但这意味着在将按钮添加到DOM之前，它将被加载并运行，即无法将其添加到侦听器。 Here's a fiddle with the script after your buttons and it runs fine. 在您按下按钮后，在脚本中摆弄一个小提琴 ，它运行良好。 For example: 例如：
<div>
<a href="#" id="play"></a>
<a href="#" id="pause" style="display: none;"></a>
</div>
<script>
$('#play').on('click', function(event) {
//currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
});
$('#pause').on('click', function(event) {
//currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
</script>
If you move the script before the buttons then the click listeners fire too early. 如果将脚本移到按钮之前，则单击监听器会触发得太早。 Scripts are run immediately upon loading. 脚本在加载后立即运行。
解决方案2
0 2017-02-17 05:38:50
$( document ).ready(function() { $('#play').show(); }); $('#play').on('click', function(event) { //currentPlayingTrack.play(); $('#pause').show(); $('#play').hide(); }); $('#pause').on('click', function(event) { //currentPlayingTrack.pause(); $('#pause').hide(); $('#play').show(); });
#play, #pause { width:80px; height: 80px; background: transparent; position: relative; margin-top: 10px; display: block; } #play { width: 0; height: 0; border-left: 30px solid white; border-right: 30px solid transparent; border-top: 30px solid transparent; border-bottom: 30px solid transparent; position: absolute; content: ""; top: 10px; left: 25px; } #pause:before { width: 10px; height: 60px; position: absolute; content: ""; top: 10px; left: 25px; } #pause:after { width: 10px; height: 60px; background: white; position: absolute; content: ""; top: 10px; right: 25px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <a href="#" id="play">Play</a> <a href="#" id="pause" style="display: none;">Pause</a> </div>
解决方案3
0 2017-02-17 05:41:31
Try this one. 试试这个。 I have commented the currentPlayingTrack.play(); 我已经评论了currentPlayingTrack.play(); for testing. 供测试用。
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('#play').on('click', function (event) { //currentPlayingTrack.play(); $('#pause').show(); $('#play').hide(); }); $('#pause').on('click', function (event) { //currentPlayingTrack.pause(); $('#pause').hide(); $('#play').show(); }); }) </script> <style> #play, #pause { width: 80px; height: 80px; background: transparent; position: relative; margin-top: 10px; display: block; } #play { width: 0; height: 0; border-left: 30px solid white; border-right: 30px solid transparent; border-top: 30px solid transparent; border-bottom: 30px solid transparent; position: absolute; content: ""; top: 10px; left: 25px; } #pause:before { width: 10px; height: 60px; background: white; position: absolute; content: ""; top: 10px; left: 25px; } #pause:after { width: 10px; height: 60px; background: white; position: absolute; content: ""; top: 10px; right: 25px; } </style> </head> <body> <div> <a href="#" id="play">Play</a> <a href="#" id="pause" style="display: none;">Pause</a> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.