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/

多光谱调色板

1 个答案: