Question

我试图为我的滑块动态创建一个div块，并且只要当前正在播放的歌曲发生变化就会创建它，我就无法让它正常工作。您还会如何推荐处理歌曲，艺术家和专辑名称。我意识到id意味着它是唯一的，所以只有第一个块才能正确渲染，然后其他块就没有数据显示出来。有没有办法可以为jquery中的每个块创建唯一的id，而不是在html中？

Here's how it looks

这是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://indianassist.mx/img/downArrow.png" height="20" width="20" />
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="getCurrentTrack">
                      <div class="trackTemplate">
                          <img src="https://s-media-cache-ak0.pinimg.com/736x/24/28/10/242810087197ad884c0d895c2953a740.jpg" 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://indianassist.mx/img/downArrow.png" height="20" width="20" />
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="getCurrentTrack">
                      <div class="trackTemplate">
                          <img src="https://s-media-cache-ak0.pinimg.com/736x/24/28/10/242810087197ad884c0d895c2953a740.jpg" 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://indianassist.mx/img/downArrow.png" height="20" width="20" />
                      </div>
                    </div>
                  </div> 
                </div>

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);

我已尝试过这种方法以及“

$('swiper-wrapper').prepend($('<div/>', {class: 'swiper-slide'}).append(
                                  $('<div/>', {class: 'getCurrentTrack'}).append(
                                    $('<div/>', {class: 'trackTemplate'}).append(
                                      $('<img/>', {src: jsonPushData.AlbumArt, width: 350, height: 350}),
                                      $('<figcaption/>', {class: songName, text: playbackArray[0].songName}),
                                      $('<figcaption/>', {class: artistName, text: playbackArray[0].artistName}),
                                      $('<figcaption/>', {class: albumName, text: playbackArray[0].albumName}),
                                      $('<img/>', {class: 'invert', src: 'http://indianassist.mx/img/downArrow.png', width: 20, height: 20})))));

`

使用JQuery动态创建元素

0 个答案: