[英]Javascript Show/Hide Play/Pause Buttons
我有一个“播放并暂停”按钮,当我单击它时,我希望“播放”变成一个“暂停”按钮。 我的CSS中有我的“播放”和“暂停”按钮,而html头中有我的javascript。
但是,当我单击“播放”按钮时,“暂停”不会显示。
<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>
我究竟做错了什么 ?
您说您的javascript位于html的头部,但这意味着在将按钮添加到DOM之前,它将被加载并运行,即无法将其添加到侦听器。 在您按下按钮后,在脚本中摆弄一个小提琴 ,它运行良好。 例如:
<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>
如果将脚本移到按钮之前,则单击监听器会触发得太早。 脚本在加载后立即运行。
$( 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>
试试这个。 我已经评论了currentPlayingTrack.play();
供测试用。
<!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.