每个列表项的颜色选择器未正确显示

Question

我正在尝试将颜色选择器容器内的随机颜色分配给列表中的每个项目，每个项目前面都有一个容器按钮（颜色选择器容器），以便在单击时打开颜色选择器容器。

$(document).ready(function() {
    $.getJSON("data.json", function(obj) {
        $('#myList').data('types', obj.types.map(function(o) {
            // console.log(o.type);
            return o.type;
        })).append(obj.types.map(function(o) {
            return '<li>' + o.type + '</li>';
        }).join('')).spectrum({
            color: (function(m,s,c){return (c ? arguments.callee(m,s,c-1) : '#') +
                s[m.floor(m.random() * s.length)]})(Math,'0123456789ABCDEF',5),
            preferredFormat: "rgb",
            showInput: true,
            showPalette: true,
            showAlpha: true,
            palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
        });
    });
});

问题是，按钮没有出现在每个列表项的前面，它只在我单击列表项时出现，并且每个项目的颜色都相同。然而，目标是为每个项目生成随机颜色。

有人能告诉我问题出在哪里吗？我该如何解决？

更新

这是我使用的颜色选择器：
https://github.com/bgrins/spectrum

第二次更新：

这是 jsfiddle，但我无法将我的数据传递到 getJSON，因为在原始文件中，我读取了一个 json 文件，其结构与我在示例中提供的结构相同。 https://jsfiddle.net/6j936afx/

第三次更新：

这是列表进入的 html 代码：

<div class="item-group">
 <label class="item-label">Types</label>
    <ul class="list-unstyled" id="myList"></ul>    
</div>

我想我需要注入一个 class 来保存每个列表项中的颜色选择器容器，如果是这样，我如何直接在 javascript 代码中完成？

Answer 1

不熟悉特定的插件，但如果你想在每个列表项中都有一个，我猜你会想要 children() 在那个链中，所以你将它应用于每个 <li> 而不是parent 列表。

尝试

$('#myList').data('types', obj.types.map(function(o) {
            // console.log(o.type);
            return o.type;
        })).append(obj.types.map(function(o) {
            return '<li>' + o.type + '</li>';
        }).join('')).children().spectrum({....

如果可行，则用 each 扩展它，这样每个实例都有自己的随机颜色

....children().each(function(){
    $(this).spectrum({/*opts*/})

})

Answer 2

li 元素添加到 Dom

后添加插件

试试这个：

$(document).ready(function () {
                $.getJSON("data.json", function (obj) {
                    $('#myList').data('types', obj.types.map(function (o) {
                        // console.log(o.type);
                        return o.type;
                    })).append(obj.types.map(function (o) {
                        return '<li>' + o.type + '</li>';
                    }).join(''));

                    $("#mylist li").spectrum({
                        color: (function (m, s, c) {
                            return (c ? arguments.callee(m, s, c - 1) : '#') +
                                    s[m.floor(m.random() * s.length)]
                        })(Math, '0123456789ABCDEF', 5),
                        preferredFormat: "rgb",
                        showInput: true,
                        showPalette: true,
                        showAlpha: true,
                        palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
                    });
                });
            });

对于随机颜色，您应该使用 each()

$("#mylist li").each(function(){
                       $(this).spectrum({
                        color: (function (m, s, c) {
                            return (c ? arguments.callee(m, s, c - 1) : '#') +
                                    s[m.floor(m.random() * s.length)]
                        })(Math, '0123456789ABCDEF', 5),
                        preferredFormat: "rgb",
                        showInput: true,
                        showPalette: true,
                        showAlpha: true,
                        palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
                    });
                });

编辑： 在每个里加一个输入，然后像这样加插件

$(document).ready(function () {
            $.getJSON("data.json", function (obj) {
                $('#myList').data('types', obj.types.map(function (o) {
                    // console.log(o.type);
                    return o.type;
                })).append(obj.types.map(function (o) {
                    return '<li>' + o.type + '<input class="color-picker" type="text"/></li>';
                }).join(''));

                $("#mylist .color-picker").each(function(){
                   $(this).spectrum({
                    color: (function (m, s, c) {
                        return (c ? arguments.callee(m, s, c - 1) : '#') +
                                s[m.floor(m.random() * s.length)]
                    })(Math, '0123456789ABCDEF', 5),
                    preferredFormat: "rgb",
                    showInput: true,
                    showPalette: true,
                    showAlpha: true,
                    palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
                   });
                });

            });
        });

每个列表项的颜色选择器未正确显示

color picker for each list item not showing up correctly

javascript

arrays

jquery

color-picker

spectrumjs

更新

第二次更新：

第三次更新：