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/

第3次更新：

这是列表中的html代码：

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

我想我需要在每个列表项中注入一个容纳颜色选择器容器的类，如果是这样，我怎么能直接在javascript代码中执行呢？

Answer 1

不熟悉特定的插件，但是如果你想在每个列表项中有一个，我猜你会想要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*/})

})

Answer 2

在将元素添加到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)"]]
                    });
                });
            });

对于随机颜色，您应该使用每个（）

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

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

更新

第二次更新：

第3次更新：

2 个答案: