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

I'm using Spectrum color picker plugin. I have 2 color pickers showing. I want the majority of the settings to be the same. The only setting differences is color, localStorageKey, and move: function (color). The rest of the settings should be the same.

我正在使用Spectrum颜色选择器插件。我有2个颜色选择器显示。我希望大多数设置都是一样的。唯一的设置差异是color,localStorageKey和move:function(color)。其余设置应该相同。

I have 1 class - "full", and 2 id's - "first", "second". The settings I want for both of them are in full, and the others are in the id.

我有1个课程 - “完整”,2个ID - “第一个”,“第二个”。我想要的两个设置都是完整的,其他设置在id中。

The problem is, when I add the settings for first and second, the color picker plugin disappears. What am I doing wrong, and how can I fix it?

问题是,当我添加第一个和第二个设置时,颜色选择器插件消失。我做错了什么,我该如何解决?

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"/>

1 个解决方案

#1

You forgot to quote the orange string. You give it only 1 quote at the start, when you should put it inside 2 quotes like the following:

你忘了引用橙色字符串了。你在开头只给它一个引号,你应该把它放在2个引号内,如下所示:

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

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

Always perform debugging using available tool such as firebug or google chrome web inspector when you find error with your js code.

当您发现js代码出错时,请始终使用firebug或google chrome web inspector等可用工具执行调试。

EDIT

Just found that you can use extend to shorten your color picker code:

刚刚发现你可以使用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

#1