Question

我从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/

非常感谢您的帮助

Answer 1

我认为您希望.appendTo(div);位于底部。

按照目前的情况，您可以将每个按钮附加到所有元素，并使用类pl-singular-playlist。

JSON重复对象

1 个答案: