Javascript顯示/隱藏播放/暫停按鈕
[英]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>
我究竟做錯了什么 ？
3 個解決方案
解決方案1
1 已采納 2017-02-17 05:35:18
您說您的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>
如果將腳本移到按鈕之前，則單擊監聽器會觸發得太早。 腳本在加載后立即運行。
解決方案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
試試這個。 我已經評論了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>
如何在javascript的audioSourceNode上實現播放/暫停按鈕？
[英]How do I implement play/pause buttons on an audioSourceNode in javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.