Javascript 显示/隐藏播放/暂停按钮

Question

我有一个播放和暂停按钮，我希望当我点击它时播放按钮变成暂停按钮。我在我的 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>

我做错了什么？

Answer 1

你说你的 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>

如果您将脚本移动到按钮之前，那么点击监听器会过早触发。脚本在加载后立即运行。