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 is defined'です。 Fiddle here 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再生/一時停止ボタンの表示/非表示

答えて

関連する問題