dimanche 25 juin 2017

Dynamically create elements using JQuery

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 how it looks

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