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开发者工具的网络标签，查看您的文件是否已加载。如果无法加载您提供的网址，则会在此标签中收到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>

<强> Fiddle Demo

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代码块中直接复制了iris的粘贴代码，请在代码中使用库链接。

Answer 4

删除包含jQuery 1.8.3库
确保iris.min.js的路径正确

jQuery（...）。iris不是一个函数

4 个答案: