I'm trying to dynamically create a div block for my slider and it's created whenever the currently playing song changes and i just can't get it to work properly. Also how would you recommend dealing with the song, artist and album names. I realise id means it's unique so only the first block would render correctly and then the other blocks would have no data showing up. Is there a way I can create unique id's for each block in the jquery without it being in the html?
Here's the HTML:
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="getCurrentTrack">
<div id="trackTemplate">
<img id="trackimg" width="350" height="350" />
<figcaption id="songName"></figcaption>
<figcaption id="artistName"></figcaption>
<figcaption id="albumName"></figcaption>
<img class="invert" id ="add" src="http://ift.tt/2s5pYcu" height="20" width="20" />
</div>
</div>
</div>
<div class="swiper-slide">
<div class="getCurrentTrack">
<div class="trackTemplate">
<img src="http://ift.tt/2sQ9wtL" width="350" height="350" />
<figcaption id="songName">songName</figcaption>
<figcaption id="artistName">songName</figcaption>
<figcaption id="albumName">songName</figcaption>
<img class="invert" id ="add" src="http://ift.tt/2s5pYcu" height="20" width="20" />
</div>
</div>
</div>
<div class="swiper-slide">
<div class="getCurrentTrack">
<div class="trackTemplate">
<img src="http://ift.tt/2sQ9wtL" width="350" height="350" />
<figcaption id="songName">songName</figcaption>
<figcaption id="artistName">songName</figcaption>
<figcaption id="albumName">songName</figcaption>
<img class="invert" id ="add" src="http://ift.tt/2s5pYcu" height="20" width="20" />
</div>
</div>
</div>
</div>
The JS:
var swiperSlide = document.createElement('div');
swiperSlide.className = 'swiper-slide';
var getCurrentTrack = document.createElement('div');
getCurrentTrack.className = 'getCurrentTrack';
var trackTemplate = document.createElement('div');
trackTemplate.className = 'trackTemplate';
var image = document.createElement('img');
image.src = jsonPushData.songURL;
image.height = 400;
image.width =400;
var song = document.createElement('figcaption');
song.text = jsonPushData.songName;
var artist = document.createElement('figcaption');
artist.text = jsonPushData.artistName;
var album = document.createElement('figcaption');
album.text = jsonPushData.albumName;
var add = document.createElement('img');
add.src = document.getElementById('add').src;
trackTemplate.appendChild(image);
trackTemplate.appendChild(song);
trackTemplate.appendChild(artist);
trackTemplate.appendChild(album);
trackTemplate.appendChild(add);
getCurrentTrack.appendChild(trackTemplate);
swiperSlide.appendChild(getCurrentTrack);
$('swiper-wrapper').prepend(swiperSlide);
Aucun commentaire:
Enregistrer un commentaire