Question

我正在制作一个类型列表，其中包含播放列表列表。现在我可以渲染列表，一切正常，但是当我尝试在类型列表中的每个播放列表列表项中添加一个复选框时，它只显示第一个流派对象和一个播放列表列表项。

function render(data) {
    // Itterate through each item in the list.
    $.each(data, function(genre) {
        // Create a new genre list item.
        let listItem = $('<li/>')
            .text(genre)
            // Append it to the list in the UI.
            .appendTo(list)
        // Create a new playlist's list
        // appended to the genre's list item.
        let playlistList = $('<ul/>')
            .appendTo(listItem)
        // Itterate through each playlist's item.
        let playlists = data[genre]
        $.each(playlists, function(i) {
            // Create a new playlist list item.
            let playlistListItem = $('<li/>')
                .text(playlists[i])
                // Append the playlist to the playlist's list.
                .appendTo(playlistList)
            // Create checkbox.
            let checkbox = $('<input/>') // <-- THIS IS WHERE THE CODE BUGS.
                .type('checkbox')
                // Append to current playlist list item.
                .appendTo(playlistListItem)
        })
    })
}

如果我删除复选框输入元素，一切都按预期工作。我尝试创建一个示例函数，我只是创建每个元素中的一个，并且在这个函数中，只要我有两个 let 语句就会出现错误，所以我想这可能会导致问题不知何故，但我不知道如何解决它。

更新： link来提琴

Answer 1

将代码更改为以下

let checkbox = $('<input>')
    .attr('type', 'checkbox')
    // Append to current playlist list item.
    .appendTo(playlistListItem)

Answer 2

你也可以这样写：

let checkbox = $('<input/>',{type:'checkbox'})

使用此方法，您还可以非常简单地设置其他属性：

let checkbox = $('<input/>',{type:'checkbox',id:'myid',name:'myname'})

将复选框附加到列表项

2 个答案: