0
這些天我正在學習JavaScript事件，同時通過javascript事件構建我的媒體播放應用程序我不明白在這個程序/代碼中使用的條件我只是想清除我的概念在這些代碼的條件音樂播放和暫停使用這個if else條件？Javascript事件
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將爲空，因此「if（songPlaying）」爲false，這將創建一個新的音頻元素並將其添加到頁面中。如果音頻元素已經在頁面上，則內部if/else將檢查該音頻歌曲是否正在播放，並執行相反的操作。因此，單擊列表將創建/開始歌曲，或暫停/重新開始歌曲。 – Shilly