Question

我有一个播放和暂停按钮，当我点击它时，我希望Play变成暂停按钮。我在我的CSS中使用了我的播放和暂停按钮，并在我的html中使用了我的javascript。

但是，当我点击“播放”按钮时，“暂停”按钮不会显示。

＆＃13;

<script>
$('#play').on('click', function(event) {
    currentPlayingTrack.play();

    $('#pause').show();
    $('#play').hide();
});

$('#pause').on('click', function(event) {
    currentPlayingTrack.pause();
    $('#pause').hide();
    $('#play').show();
});
</script>

＆＃13;

#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;
}

＆＃13;

<div>
<a href="#" id="play"></a> 
<a href="#" id="pause" style="display: none;"></a>
</div>

＆＃13;

我做错了什么？

Answer 1

你说你的javascript位于你的html的头部，但这意味着它会在你的按钮添加到DOM之前加载和运行，即它们将无法添加监听器。 {/ 3}}按钮后面的脚本运行正常。例如：

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

如果在按钮之前移动脚本，则单击侦听器会过早触发。脚本在加载后立即运行。

Answer 2

＆＃13;

$( 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();
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 3

试试这个。我评论了currentPlayingTrack.play();进行测试。

＆＃13;

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

＆＃13;

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

3 个答案: