0
最近、私はJavascriptイベントを学んでいます。ジャバスクリプトイベントを介してアプリケーションを再生するメディアを構築しています。私はこのプログラム/コードで使用されている条件を理解できませんでした。音楽を再生し、これを使用して一時停止した場合は他の条件ですか？Javascript Events
var jukeBox = document.querySelector('ul.player');
jukeBox.addEventListener('click', function(e) {
var songName = e.target.getAttribute('data-src');
var songPlaying = document.querySelector('#player');
if(songPlaying){
if(songPlaying.paused){
songPlaying.play();
e.target.id = 'playing';
}else{
songPlaying.pause();
e.target.id = 'pause';
}
}else{
var audioPlayer = document.createElement('audio');
audioPlayer.id = 'player';
audioPlayer.src = songName;
document.body.appendChild(audioPlayer);
audioPlayer.play();
e.target.id = 'playing';
}
}, false);body {
font: normal 15px/15px Helvetica;
background: #259286;
}
ul.player {
width: 180px;
margin: 0 auto;
margin-top: 100px;
list-style: none;
}
ul.player li {
border-bottom: 1px solid #999;
color: #444;
padding: 9px 5px 10px 40px;
background: url(images/media_btn.png) no-repeat 8px 7px;
background-color: #EAE3CB;
background-position: 9px 4px;
cursor: pointer;
}
ul.player li:first-child {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
border-top: none;
}
ul.player li:last-child {
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom: none;
}
ul.player li:hover {
background-color: #475B62;
color: #FCF4DC;
}
ul.player li#playing {
background: url(images/media_play_btn.png) no-repeat 8px 7px;
background-color: #FCF4DC;
color: #2176C7;
font-weight: bold;
background-position: 9px 4px;
}
ul.player li#paused {
background: url(images/media_pause_btn.png) no-repeat 8px 7px;
background-color: #666;
color: #FFF;
font-weight: bold;
background-position: 9px 4px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Events</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ul class="player">
<li data-src="audio/Phoebex.mp3">Phoebex</li>
<li data-src="audio/AmazingLee.mp3">AmazingLee</li>
<li data-src="audio/NightKitty.mp3">Night Kitty</li>
<li data-src="audio/EqueKenox.mp3">Eque Kenox</li>
<li data-src="audio/Shiloah.mp3">Shiloah</li>
</ul>
<script src="script.js"></script>
</body>
</html>
あなたはどちらの部分を理解していませんか？曲リストのどこかでクリックが発生すると、ハンドラーはid 'player'というオーディオ要素があるかどうかをチェックします。ページ上に要素が見つからない場合、songPlayingはnullになります。したがって、 'if（songPlaying）'がfalseの場合、新しいオーディオ要素が作成されてページに追加されます。オーディオエレメントが既にページにある場合、内部のif/elseは、そのオーディオソングが再生されているかどうかをチェックし、反対の動作を行います。リストをクリックすると、曲の作成/開始、または曲の一時停止/再開ができます。 – Shilly