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

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>

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

Answer 1

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)"]]
                    });
                });

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

$(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)"]]
                   });
                });

            });
        });

Answer 2

不熟悉特定插件，但如果您希望在每个列表项中都有一个，我猜您会希望在该链中使用 children()，因此您将其应用于每个 <li> 而不是父列表。

试试

$('#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*/})

})