我无法让光谱颜色选择器工作。我错过了什么？答案

【问题标题】：I cannot get the spectrum color picker to work. What am I missing?我无法让光谱颜色选择器工作。我错过了什么？
【发布时间】：2020-07-19 03:30:56
【问题描述】：

回复：http://jsfiddle.net/bgrins/ctkY3/

我很茫然。我无法让这个颜色选择器（或任何颜色选择器）工作。

以下是测试页的全部 HTML 内容。

我有 jquery 链接。

据我所知，链接（.js 和 .css）上的路径是正确的。

我还尝试将内联初始化包装在“$(document).ready(function()”中，但这没有帮助。我得到的只是常规文本框。它不适用于我在多个浏览器和多个设备。

谁能看到我错过的东西？

这可能很简单，我会感到尴尬，但我迫切希望让一个好的颜色选择器工作。这是我尝试的第三个。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spectrum Color Picker - Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="include/spectrum/spectrum.js"></script>
<link rel="stylesheet" href="include/spectrum/spectrum.css" />

<script>
$(".basic").spectrum({
    color: "#f00",
    change: function(color) {
            $("#basic-log").text("change called: " + color.toHexString());
    }
});
</script>

</head>

<body>
<h2>Basic Usage</h2>
<input type='text' class="basic"/>
<em id='basic-log'></em>
</body>
</html>

【问题讨论】：

注意：<input> 和 <link> 标签不使用也不需要结束斜线，并且在 HTML 中永远不会有。
我建议您将 http://code.jquery.com/jquery-latest.js 更改为 https://code.jquery.com/jquery-latest.js 浏览器无疑会阻止 jQuery 加载，因为您在“HTTP”内容>HTTPS"
@Rob：谢谢。我已经编辑了测试页面以删除它们，但脚本仍然无法正常工作。
@NewToJS：我正在托管 .js 和 .css 文件。我确实会尝试将 jquery 的链接更改为 SSL，看看是否有帮助！谢谢！
@NewToJS：呵呵！就是这样！将 jquery 链接更改为 SSL 就成功了！！！！谢谢！如何将您的答案标记为答案？您的答案显示为评论？

标签： javascript jquery colors picker

【解决方案1】：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://bgrins.github.io/spectrum/spectrum.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="http://bgrins.github.io/spectrum/spectrum.js"></script>
</head>

<body>
    <h2>Basic Usage</h2>
    <input type='text' class="basic" />
    <em id='basic-log'></em>
    <script>
        $(".basic").spectrum({
            color: "#f00",
            change: function (color) {
                $("#basic-log").text("change called: " + color.toHexString());
            }
        });
    </script>
</body>

</html>

这绝对有效，我唯一能想到的是css 和js 没有正确加载。

【讨论】：

您也可以将源代码放在jQuery DOM 就绪函数中。例如$(function(){/*---- Your Spectrum Code Here ----*/});
@Andy-Song：谢谢。我试过了。依然没有。 :-/
@NewToJS：正如我在原帖中已经提到的，我已经尝试过了。 -> “我也尝试将内联初始化包装在“$(document).ready(function()”中，但这没有帮助。”
@DougJoseph 我想我找到了你的问题，请阅读我在你的问题下的评论。谢谢
@NewToJS：你确实做到了！我怎样才能将您的答案标记为正确答案？您需要将其发布为答案而不是评论吗？

【解决方案2】：

**答案是双重的。

需要确保“DOM READY”（文档已完全加载）是其中的一部分。在我的例子中，这是通过将内联初始化脚本放在底部，就在结束 body 标记上方来实现的。也可以通过将内联初始化包装在 "$(document).ready(function()"...
另外，我在尝试链接非 SSL 版本的 JQuery 时正在提供 SSL 页面这一事实是另一部分。通过将 JQuery 与“httpS://”（

再次感谢@NewToJS 和@AndySong，他们都为我提供了所需的答案。**

【讨论】：