javascript - jQuery(...).iris 不是一个函数

Question

我正在尝试实现此处提供的颜色选择器 http://automattic.github.io/Iris/这是我包含的库。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/iris.min.js"></script>

这就是我实现此代码的方式

 $(document).ready(function() {
       jQuery('#color-picker').iris(); 
});

这就是我的输入字段

<input type="text" id='color-picker' value="#bada55" />

但我不知道为什么会收到此错误

TypeError: jQuery(...).iris is not a function
jQuery('#color-picker').iris();

Answer 1

您的 iris 脚本的路径似乎错误，导致浏览器无法加载文件。所以你可以再次检查一下路径js/iris.min.js是否正确。

您可以通过转到 Firebug 或 Chrome 开发者工具的网络选项卡来检查文件是否已加载。如果它无法加载您提供的 URL，您将在此选项卡中收到 404 未找到错误。

或者您也可以尝试替换:

<script src="js/iris.min.js"></script>

来自 Github 的直接链接:

<script src="https://github.com/Automattic/Iris/blob/master/dist/iris.min.js"></script>

最后一点是，您只需要包含 jQuery 一次，您可以选择版本 1.10.2 或 1.8.3，您知道该版本将兼容你的 jQuery 代码。

<小时/>

我认为这应该是这里的iris脚本有问题，尝试直接从他们的主页使用这个版本:

<script src="http://automattic.github.io/Iris/javascripts/iris.min.js"></script>

<强> Fiddle Demo