首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >多光谱调色板

多光谱调色板
EN

Stack Overflow用户
提问于 2014-08-11 17:37:58
回答 1查看 1.3K关注 0票数 0

我一直试图找出为什么我不能得到多个颜色选择器打开我的光谱调色板。最后是弹琴。

HTML

代码语言:javascript
运行
复制
<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:

代码语言: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/

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-08-11 18:21:19

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

代码语言: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());
        }
        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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25249195

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档