2017-07-06 116 views
0

我從一個json獲取數據,我希望顯示爲按鈕的文本,但是,我得到的是相互重疊的按鈕。我做了什麼,似乎無法解決它。這是函數:JSON複製對象

function initPlaylist() { 

    //Get the playlists data from JSON 
    $.get('json/playlists.json', function(data) { 

     data.forEach(function(playlist) { 

      //Create div for each playlist and populate it 
      var album = $('<div>', {class: 'pl-singular-playlist'}).appendTo(playlistsContainer); 

      //Playlist image 
      $('<img>', {src: playlist.image}).appendTo(album); 

      //Playlist button 
      $('<button>', { 
       'data-id': playlist.id, 
       text: playlist.name, 
       class: 'pl-play-button', 
       click: function (e) { 

        //Show image in music player 
        $('<img>', { 
         src: playlist.image, 
         id: 'pl-selected-image' 
        }).appendTo(playerContainer); 

        //Set background image for the music player container 
        $(mainContainer).css('background-image', 'url(' + playlist.image + ')'); 
        $(mainContainer).css('background-size', 'cover'); 
        $(mainContainer).css('background-repeat', 'no-repeat'); 
        $(mainContainer).css('background-position', 'center'); 

        initAudio(e.currentTarget.dataset.id); 
       } 
      }).appendTo('.pl-singular-playlist'); 
     }) 
    }) 
} 

這是該項目目前我有,所以你可以看到它的外觀(按鈕顯示在懸停):

https://aviadweiss.github.io/playlists/

會感謝你的幫助

+0

你可以顯示json結構嗎? –

回答

0

我認爲你需要底部的.appendTo(div);

現在,您將每個按鈕附加到全部元素與類pl-singular-playlist

+0

謝謝,效果很好! –