Javascript顯示/隱藏播放/暫停按鈕

我有一個播放和暫停按鈕，我希望播放變成一個暫停按鈕，當我點擊它。我的我的播放和暫停按鈕準備好在我的CSS和我的HTML頭部的JavaScript。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>

我在做什麼錯？

來源

2017-02-17 mattvent

正確？玩鏈接隱藏？ – nnnnnn

它的工作，我發現的唯一錯誤是'currentPlayingTrack未定義'。小提琴在這裏https://jsfiddle.net/flyinggambit/qju6rjps/ –

你說你的javascript是在你的html的頭部，但這意味着它會在你的按鈕被添加到DOM之前被加載和運行，即它們將不可用於添加一個監聽器。 Here's a fiddle與您的按鈕後的腳本，它運行良好。例如：

<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>

如果您在按鈕之前移動腳本，則點擊偵聽器會觸發得太早。加載後立即運行腳本。

來源

2017-02-17 05:35:18 j3py

謝謝！這樣可行。現在將它放在頁面的中心，因爲它現在只停留在左側。另外我必須讓它變大。 – mattvent

@mattvent很高興聽到它！如果你可以把這個標記爲答案，那就太棒了:) – j3py

剛剛做到了;）謝謝 – mattvent

$(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>

來源

2017-02-17 05:38:50

試試這一個。我已評論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>

來源

2017-02-17 05:41:31 Nitheesh

Javascript顯示/隱藏播放/暫停按鈕

回答

相關問題