хорошо ... да, я новичок в этом. Я собираюсь повторно задать вопрос, аналогичный моему последнему, который не был решен.
У меня есть javascript файл из 4 всего - название альбома, изображение альбома, исполнитель, дата выпуска и треки. Каждый альбом имеет 4 трека (вложенные объекты). Я сейчас работаю только на треках. Каждый альбом является частью слайда, на котором отображается один альбом за раз. Я также пытаюсь связать mp3-файлы с названием песни с изображением песни для каждого трека со звуком. Проблема в том, что я получаю все треки в списке только первого трека. И я не могу понять, как связать mp3 и изображения. Кроме того, я использую литералы шаблона. Пожалуйста, помогите, я не могу понять это.
// JavaScript Document
var albumData =[
{
"imageUrl": "music_imgs/covers/genpx1.png",
"artist": "Gen1artist",
"name": "Gen1name",
"release":"released 2017",
"tracks":[
{
"TrackNumber": "1",
"link":"media/file_example_MP3_700KB.mp3",
"song":"Gen1Track1",
"songimgUrl": "music_imgs/availsound.png",
"duration":"2:47"
},
{
"TrackNumber": 2,
"song":"Gen1Track2",
"duration":"0:00"
},
{
"TrackNumber": 3,
"link":"media/ffile_example_MP3_700KB.mp3",
"song":"Gen1Track3",
"songimgUrl": "music_imgs/availsound.png",
"duration":"2:52"
},
{
"TrackNumber": 4,
"link":"media/file_example_MP3_700KB.mp3",
"song":"Gen1Track4",
"songimgUrl": "music_imgs/availsound.png",
"duration":"3:25"
}
]
},
{
"imageUrl": "music_imgs/covers/genpx2.png",
"artist": "Gen2artist",
"name": "Gen2name",
"release":"released 201x",
"tracks":[
{
"TrackNumber": 1,
"link":"media/file_example_MP3_700KB.mp3",
"song":"Gen2Track1",
"songimgUrl": "music_imgs/availsound.png",
"duration":"4:15"
},
{
"TrackNumber": 2,
"song":"Gen2Track2",
"duration":"3:22"
},
{
"TrackNumber": 3,
"song":"Gen2Track3",
"duration":"3:13"
},
{
"TrackNumber": 4,
"song":"Gen2Track4",
"duration":"5:01"
}
]
},
{
"imageUrl": "music_imgs/covers/genpx3.png",
"artist": "Gen3artist",
"name": "Gen3name",
"release":"released 2014",
"tracks":[
{
"TrackNumber": 1,
"link":"media/file_example_MP3_700KB.mp3",
"song":"Gen3Track1",
"songimgUrl": "music_imgs/availsound.png",
"duration":"4:04"
},
{
"TrackNumber": 2,
"song":"Gen3Track2",
"duration":"0:00"
},
{
"TrackNumber": 3,
"song":"Gen3Track3",
"duration":"0:00"
},
{
"TrackNumber": 4,
"song":"Gen3Track4",
"duration":"0:00"
}
]
},
{
"imageUrl": "music_imgs/covers/genpx4.png",
"artist": "Gen4artist",
"name": "Gen4name",
"release":"released 2006",
"tracks":[
{
"TrackNumber": 1,
"link":"media/file_example_MP3_700KB.mp3",
"song":"Gen4Track1",
"songimgUrl": "music_imgs/availsound.png",
"duration":"3:03"
},
{
"TrackNumber": 2,
"link":"media/file_example_MP3_700KB.mp3",
"song":"Gen4Track2",
"songimgUrl": "music_imgs/availsound.png",
"duration":"4:36"
},
{
"TrackNumber": 3,
"link":"media/file_example_MP3_700KB.mp3",
"song":"Gen4Track3",
"songimgUrl": "music_imgs/availsound.png",
"duration":"2:52"
},
{
"TrackNumber": 4,
"song":"Gen4Track4",
"duration":"0:00"
}
]
}
]
var tracks = $(`${albumData.map(function(tlist)
{
return tlist.tracks.map(r=>`
<div class="tracklist">
<li>
<span class="songs">${r.TrackNumber + ". " + r.song + r.link + r.songimgUrl}</span>
<span class="time">${r.duration}</span>
</li>
</div>
`).join('');
}).join('')
}`);
var playlist=$('#playlist');
$( playlist ).append( tracks );
//albumsimgs, albumnames, tracks
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDivs(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var slides = document.getElementsByClassName("tracklist");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
slides[slideIndex-1].style.display = "block"
}
}
@charset "UTF-8";
/* CSS Document */
*{
box-sizing: border-box;
}
body{
text-align:center;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.8rem;
font-weight:bold;
color:#ffffff;
background-color:#000000;
}
container{
margin: 0 auto;
position: relative;
padding-top: 5px;
width:85%;
height:auto;
display:block;
box-sizing: border-box;
}
#music{
position: relative;
}
#playlist{
float:right;
width:60%;
padding:10px;
background-color:#373636;
list-style: none; /* remove bullets */
border:dashed #F7060A;
}
.songs{
float:left;
list-style:none;
}
.time{
float:right;
list-style:none;
}
.bacfor{
position:absolute;
width:35%;
float:left;
}
/* Position the "next button" to the right */
.forw {
float:right;
right: 0;
}
.back{
float:left;
left:0;
}
/* Next & previous buttons */
.back, .forw {
cursor: pointer;
width:13%;
padding: 4px;
color: white;
background-color:#7d7d7d;
font-weight: bold;
font-size: 15px;
transition: 0.6s ease;
border-radius:3px;
user-select: none;
}
/* On hover, add a black background color with a little bit see-through */
.back:hover, .forw:hover {
background-color:#9b9c9c;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>playlist1-6.2</title>
<link href="mus_css/playlist1-6.2.css" rel="stylesheet" type="text/css">
</head>
<body>
<container>
<div id="music">
<div class="bacfor">
<a class="back" onclick="plusDivs(-1)">❮</a>
<a class="forw" onclick="plusDivs(1)">❯</a>
</div >
<div id="playlist">
<!---<li class="tracklist">
<span class="songs"></span>
<span class="time"></span>
</li>--->
</div>
</div>
</container>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="mus_js/playlist1-6.2.js"></script>
</body>
</html>