添加我自己的设置时未加载频谱

Question

我正在使用 Spectrum color picker plugin。我有 2 个颜色选择器显示。我希望大部分设置都相同。唯一的设置差异是 color、localStorageKey 和 move: function (color)。其余设置应该相同。

我有 1 个 class - "full" 和 2 个 id's - "first", "second"。我想要的两个设置都在full，其他的在id.

问题是，当我添加 first 和 second 的设置时，颜色选择器插件消失了。我做错了什么，我该如何解决？

JSFiddle

$(".full").spectrum({
     color: false,
        flat: false,
        showInput: true,
        allowEmpty: false,
        showInitial: false,
        showPalette: true,
        showPaletteOnly: false,
        hideAfterPaletteSelect: false,
        showSelectionPalette: true,
        localStorageKey: false,
        showAlpha: true,
        palette: [
            ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
            ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
            ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"]
        ]
    });
    
// The problem is, when the following code gets uncommented:

    /*$("#first").spectrum({
        color: "green",
        localStorageKey: "first",
        
        move: function (color) {
            // Perform Some Code
        }
    });
    
    $("#second").spectrum({
        color: "orange,
        localStorageKey: "second",
        
        move: function (color) {
            // Perform Some Code
        }
    });*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://bgrins.github.io/spectrum/spectrum.js"></script>
<link href="http://bgrins.github.io/spectrum/spectrum.css" rel="stylesheet"/>



<a href='http://bgrins.github.com/spectrum'>Spectrum Homepage</a>

<h2>First</h2>
<input type='text' class="full" id="first"/>

<h2>Second</h2>
<input type='text' class="full" id="second"/>

Answer 1

您忘记引用 orange 字符串。你在开始时只给它 1 个引号，当你应该把它放在 2 个引号内时，如下所示：

 $("#second").spectrum({
        color: "orange",
        localStorageKey: "second",

        move: function (color) {
            // Perform Some Code
 } 
});

当您发现 js 代码有错误时，始终使用 firebug 或 google chrome 网络检查器等可用工具进行调试。

编辑

刚刚发现您可以使用 extend 来缩短您的颜色选择器代码：

// define your color picker object in a variable
var rules = {
        color: false,
        flat: false,
        showInput: true,
        allowEmpty: false,
        showInitial: false,
        showPalette: true,
        showPaletteOnly: false,
        hideAfterPaletteSelect: false,
        showSelectionPalette: true,
        localStorageKey: false,
        showAlpha: true,
        palette: [
            ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
            ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
            ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"]
        ]
    };

// use and add other key value pair it inside the color picker with $.extend method

    // first id
    $("#first").spectrum(        
     $.extend(rules, {
        color: "green",
        localStorageKey: "first",
        move: function (color) {
            alert();
        }
     })
    );

    // second id
    $("#second").spectrum(
        $.extend(rules, {
        color: "orange",
        localStorageKey: "second",
        move: function (color) {
            // Perform Some Code
        }
        })
    );

FIDDLE DEMO

添加我自己的设置时未加载频谱

Spectrum not loading when adding my own settings

html

javascript

jquery

spectrumjs

JSFiddle