javascript - 多光谱调色板

Question

我一直在试图找出为什么我无法在我的光谱调色板上打开多个颜色选择器。 jsfiddle 在最后。

HTML

<label>
<input name="cand_no" type="text" />
</label>
<div class="clear"></div>
<div class="initial_oneColor">
<table id="initialTable1" width="630" border="0">
    <tr>
        <td>Colors</td>
    </tr>
    <tr>
        <td>
            <input type='text' id="showPaletteOnly" class="test" />
        </td>
    </tr>
</table>
</div>
<div class="template" style="display: none">
<table>
    <tr>
        <td>
            <input type='text' id="showPaletteOnly" class="test" />
        </td>
    </tr>
</table>
</div>

Javascript:

$('[name="cand_no"]').on('change', function () {
    // Not checking for Invalid input
    if (this.value != '') {
        var val = parseInt(this.value, 10);

        for (var i = 0; i < val; i++) {
            // Clone the Template
            var $cloned = $('.template tbody').clone();
            // For each Candidate append the template row
            $('#initialTable1 tbody').append($cloned.html());
        }
    }
});

$(".test").spectrum({
    color: "white",
    showPaletteOnly: true,
    change: function (color) {
        printColor(color);
    },
    palette: [
    //White, blank, red, green, blue
    ["rgb(255, 255, 255)", "rgb(0, 0, 0)", "rgb(237, 10, 21)",
        "rgb(6, 247, 108)", "rgb(6, 137, 255)"],

    //sky blue, light blue, silver, mint, off white
    ["rgb(0, 194, 252)", "rgb(8, 240, 252)", "rgb(192, 191, 197)",
        "rgb(171, 211, 202)", "rgb(255, 239, 240)"],

    //purple, lavendar, hotpink, pink, light pink
    ["rgb(115, 111, 250)", "rgb(222, 190, 239)", "rgb(245, 21, 154)",
        "rgb(219, 57, 204)", "rgb(245, 194, 227)"],

    //blush, orange, yellow, warm white, turqoise
    ["rgb(201, 95, 167)", "rgb(212, 54, 27)", "rgb(222, 242, 49)",
        "rgb(243, 228, 195)", "rgb(1, 220, 164)"], ]
});

我基本上想让用户在文本框中输入数字，生成那么多颜色选择框，然后用户可以为每个框选择一种颜色。我不明白为什么只有第一个框打开颜色选择。

此外，如果有人知道我如何进行随机化，以随机生成颜色而不是手动选择。

http://jsfiddle.net/zredmonkeyz/nrsb9oqh/

我正在尝试创建类似于此网站的内容:http://swatchspot.com/

Answer 1

看看下面的代码，它所做的只是标记new频谱，然后在每个change事件以及第一次加载页面时初始化这些频谱确保第一个已初始化。至于随机颜色，你也可以看看下面的方法

$('[name="cand_no"]').on('change', function () {
    // Not checking for Invalid input
    if (this.value != '') {
        var val = parseInt(this.value, 10);

        for (var i = 0; i < val; i++) {
            // Clone the Template
            var $cloned = $('.template tbody').clone();
            // For each Candidate append the template row
            $('#initialTable1 tbody').append($cloned.html());
        }
        makeSpectrums();
    }
});

function myRandomColor() {
    var color = 'rgb(';
    for (var i = 0; i < 3; i++) {
        color += Math.floor(Math.random() * 255) + ', ';
    }
    color += ')';
    console.log(color);
    return color;
}

function makeSpectrums() {
    $(".newSpectrum").not('.template .newSpectrum').spectrum({
        color: myRandomColor(),
        showPaletteOnly: true,
        change: function (color) {
            printColor(color);
        },
        palette: [
        //White, blank, red, green, blue
        ["rgb(255, 255, 255)", "rgb(0, 0, 0)", "rgb(237, 10, 21)",
            "rgb(6, 247, 108)", "rgb(6, 137, 255)"],

        //sky blue, light blue, silver, mint, off white
        ["rgb(0, 194, 252)", "rgb(8, 240, 252)", "rgb(192, 191, 197)",
            "rgb(171, 211, 202)", "rgb(255, 239, 240)"],

        //purple, lavendar, hotpink, pink, light pink
        ["rgb(115, 111, 250)", "rgb(222, 190, 239)", "rgb(245, 21, 154)",
            "rgb(219, 57, 204)", "rgb(245, 194, 227)"],

        //blush, orange, yellow, warm white, turqoise
        ["rgb(201, 95, 167)", "rgb(212, 54, 27)", "rgb(222, 242, 49)",
            "rgb(243, 228, 195)", "rgb(1, 220, 164)"]]
    }).removeClass('newSpectrum');
}
makeSpectrums();

演示:http://jsfiddle.net/robschmuecker/nrsb9oqh/7/