Javascript 多光谱调色板

我一直在想为什么我不能在我的光谱调色板上打开多个颜色选择器。最后是一个jsfiddle

HTML

颜色

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

$（'[name=“cand_no”]'）。在（'change'，函数（）{
//不检查无效输入
if（this.value！=''）{
var val=parseInt（this.value，10）；
对于（变量i=0；i

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

还有，如果有人知道我怎么能用它来随机生成颜色，而不是手动选择

---

我正在尝试创建类似于此网站的东西：

看看下面的代码，它所做的只是标记

新的

频谱，然后在每次

更改

事件后以及第一次加载页面时初始化这些频谱，以确保第一个频谱已初始化。至于随机颜色，你也可以看看下面的方法

$('[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();

$（'[name=“cand_no”]'）。在（'change'，函数（）{
//不检查无效输入
if（this.value！=''）{
var val=parseInt（this.value，10）；
对于（变量i=0；i

---

演示：

Rob非常感谢，我甚至没有想过让它成为自己的函数并引用其中的类。至于随机性的问题，我以前确实有过这样的代码，但是我并不完全清楚随机性是什么意思。我的意思是从我定义的调色板中随机选择，而不是随机的RGB值。@user3130128使它们都以随机颜色开始

$('[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();