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 error not found。

或者您也可以尝试替换：

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

小提琴演示

Answer 2

您的代码是否在加载jQuery、jQueryUI和Iris之前运行？确保您将自己的脚本文件放在其余的脚本文件之后。

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

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

Answer 3

您需要有到jQuery和jQuery UI的链接，而不是两次添加jQuery。

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

然后在页面加载时调用iris，它就能工作了。下面是工作小提琴http://jsfiddle.net/WLru3/的链接

PS:我已经在js代码块中直接复制了粘贴的虹膜代码，请在代码中使用库链接。