无法让光谱颜色选择器工作
Posted
技术标签:
【中文标题】无法让光谱颜色选择器工作【英文标题】：unable to get spectrum colorpicker working 【发布时间】：2013-04-26 10:23:01 【问题描述】：我正在尝试实现光谱颜色选择器http://bgrins.github.io/spectrum/
我在与 html 文件相同的文件夹中有频谱 css 文件和频谱 js 文件以及 jquery 1.9.0 文件。
我得到的只是屏幕上的一个输入框，没有颜色选择器。我已经在 firefox/chrome 和 IE 中尝试过，但没有。
我看不到任何地方说我需要任何其他文件
任何人都可以帮忙，因为我认为这可能非常明显
这是html文件的代码
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
<link rel="stylesheet" type="text/css" href="spectrum.css ">
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="spectrum.js"></script>
<script>
$(".my_color").spectrum(
color: "#f00"
);
</script>
</head>
<body>
<input type='text' class="my_color" />
</body>
</html>
【问题讨论】：
尝试将<script>放在页面末尾或使用$(document).ready(function() ...script here... );
【参考方案1】：
确保在 DOM 完成加载后调用您的脚本，例如，
$(document).ready(function()
$(".my_color").spectrum(
color: "#f00"
);
);
使用正确的执行顺序可以正常工作：http://jsfiddle.net/xqdBd/
请注意：http://jsfiddle.net/xqdBd/1/ 不再起作用，因为在 DOM 完成加载之前调用了 JavaScript。
这里还有一个问题：
<link rel="stylesheet" type="text/css" href="spectrum.css ">
请注意"spectrum.css " 末尾的额外空间，或者您的 JavaScript 文件没有被加载。没有看到你正在使用的页面是不可能知道的。
【讨论】：
我发现js $(".my_color").spectrum( color: "#f00" );需要离开输入并现在工作 @BarryWatts 它不必去追求。这只是意味着它会在之后进行评估。$(document).ready() 仍然是一个很好的做法，因为您可以确保在加载 JavaScript 之前完成 DOM，并且您的 JavaScript 可以在页面上的任何位置移动。
Just to add $(function()); 是 $(document).ready( function()); 的简写【参考方案2】：
js
$(".my_color").spectrum(
color: "#f00"
);
必须去输入框后面
【讨论】：
如上述答案所述，它不必放在受影响的元素之后。它必须在页面上加载输入后评估。以上是关于无法让光谱颜色选择器工作的主要内容，如果未能解决你的问题，请参考以下文章
频谱颜色选择器在 Internet Explorer 中不起作用